Question

我正在地面进入d3.js.我知道，在我前面有一个陡峭的学习曲线，但我不太希望被困在我试过的第二个简单教程上。现在正在做出改变，以便为同事程序员的理解做出最大的边际贡献！

我正在尝试使用我的数据获得一个简单的svg条形图，这几乎与样本相同。

Bostock的数据

name    value
Locke   4
Reyes   8
Ford    15
Jarrah  16
Shephard    23
Kwon    42

我的数据

year    value 
year2013    2476
year2014    7215
year2015    23633
year2016thru229 21752

请注意，我们的第二列具有相同的名称。两者都包含数字。我给我的数据集命名了。因此，我应该能够在不改变事物的情况下运行他的代码（下面），但它会返回：

Unexpected value NaN parsing width attribute.

...uments);null==e?this.removeAttribute(n):this.setAttribute(n,e)}function 

d3.min.js (line 1, col 2575)

Unexpected value NaN parsing x attribute.

...uments);null==e?this.removeAttribute(n):this.setAttribute(n,e)}function 

d3.min.js (line 1, col 2575)

他的代码和教程是here。

Answer 1

您没有以正确的格式提供D3数据。

https://jsfiddle.net/guanzo/kdcLj5jj/1/

var data = [
{year:'year2013',value:2476},
{year:'year2014',value:7215},
{year:'year2015',value:23633},
{year:'year2016thru229',value:21752}
]

var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .range([0, width]);

var chart = d3.select(".chart")
    .attr("width", width);

  x.domain([0, d3.max(data, function(d) { return d.value; })]);

  chart.attr("height", barHeight * data.length);

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", barHeight - 1);

  bar.append("text")
      .attr("x", function(d) { return x(d.value) - 3; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d) { return d.value; });


function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

简单，恼怒的d3.js例子

1 个答案: