您好，我刚开始学习 js，我遇到了一些问题。我的以下代码没有显示任何内容，我正在尝试从 csv 文件创建条形图，代码运行良好，bootstrap 库也正常工作，但是当我运行它时只有 svg 部分不可见，我在 eclipse IDE 上使用 tomcat 8.0 服务器非常感谢任何帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type = "text/javascript" src="d3/d3.v2.js"></script>
<script type = "text/javascript" src="d3/d3.v3.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Clinical Data Analysis</h1>
<p>Global Performance</p>
</div>
<svg class="chart" width="40" height="40"></svg>
<p>Global Performance</p>
<script>
var svg = d3.select("svg"),
margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin;
var xScale = d3.scaleBand().range ([0, width]).padding(0.4),
yScale = d3.scaleLinear().range ([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + 100 + "," + 100 + ")");
d3.csv("XYZ.csv", function(error, data) {
if (error) {
throw error;
}
xScale.domain(data.map(function(d) { return d.year; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
return "$" + d;
}).ticks(10))
.append("text")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("value");
});
</script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>
</body>
</html>
代码正在运行，但条形图未显示
最佳答案
有两个问题，一是您使用的 d3 版本不符合您的代码，二是您的尺寸需要修改。
第一个问题是您使用的是旧版本的 d3:
<script type = "text/javascript" src="d3/d3.v2.js"></script>
<script type = "text/javascript" src="d3/d3.v3.min.js"></script>
但是使用 d3v4 命名空间:
yScale = d3.scaleLinear().range ([height, 0]);
例如，D3v3 使用 d3.scale.linear()
由于d3v3中的比例尺都是d3.scale的属性，d3库中没有位于d3.scaleBand或d3.scaleLinear的属性或函数，因此你会看到你得到的错误。 D3v4改变了这种设计模式。
那么，让我们使用 d3v4，它解决了第一个问题。
其次，您的尺寸需要修改。你有一个 40x40 的 svg:
<svg class="chart" width="40" height="40"></svg>
但是你有 200 的边距(或每边 100)，在 svg 的可见部分内自然不会出现任何内容。您实际上在此处指定了负高度和宽度:
width = svg.attr("width") - margin, // width = 40 - 200
height = svg.attr("height") - margin; // height = 40 - 200
相反，我们可以将 svg 增加到 500,500(例如)并将边距设置为更合理的值，例如 40 像素，然后我们应该会按预期看到您的坐标轴:
var svg = d3.select("svg"),
margin = 40,
width = svg.attr("width") - margin*2,
height = svg.attr("height") - margin*2;
var xScale = d3.scaleBand().range ([0, width]).padding(0.4),
yScale = d3.scaleLinear().range ([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
var data = [
{year: 2000, value: 100},
{year: 2001, value: 200},
{year: 2002, value: 300},
{year: 2003, value: 400},
{year: 2004, value: 200},
{year: 2005, value: 100},
];
xScale.domain(data.map(function(d) { return d.year; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
g.append("g")
.attr("transform", "translate(0," + (height) + ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
return "$" + d;
}).ticks(10))
.append("text")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("value");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<h1>Clinical Data Analysis</h1>
<p>Global Performance</p>
</div>
<svg class="chart" width="500" height="500"></svg>
<p>Global Performance</p> 这里是 a bl.ock演示它。
我添加了一些直接嵌入的虚拟数据。我也没有添加一行，因为你没有包含代码，所以它只是轴
关于javascript - SVG 在浏览器上不显示任何内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50055197/