Question

您好我刚开始学习js而且我遇到了一些问题。我的代码没有显示任何内容，我试图在这里创建一个cpv文件的条形图，代码运行正常，bootstrap库也正常工作，但是当我运行它时，只有svg部分不是visibe，我在eclipse IDE上使用tomcat 8.0服务器，任何帮助都非常感谢。

boxColor2

代码正在运行，但条形图未显示

Answer 1

有两个问题，一个是你使用的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像素，然后我们应该看到你的轴是预期的：

＆＃13;

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");

＆＃13;

<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>

＆＃13;

这里有a bl.ock证明了这一点。

我添加了一些我直接嵌入的虚拟数据。我也没有添加一行，因为你没有包含代码，所以它只是轴

SVG在浏览器上没有显示任何内容

1 个答案: