Question

我是D3的新手所以请耐心等待。

我正在尝试在d3.js中构建并排图。我试图在'g'（群组）中添加'rect'（矩形svg）有点困难。我不确定json数据是否格式错误。或者，如果我错过了一些基本步骤。

Json object = data;

var data = [
 {
  dontknow: 3,
  neutral: 0,
  optimistic: 62,
  pessimistic: 15,
  veryoptimistic: 14,
  verypessimistic: 6,
  year: 2013
 },
 {
  dontknow: 10,
  neutral: 4,
  optimistic: 42,
  pessimistic: 55,
  veryoptimistic: 64,
  verypessimistic: 5,
  year: 2013
 }
]

我的代码看起来像这样：

var svg = d3.select("#graph5")
.append("svg")
.attr("width", w)
.attr("height", h);

//Create groups
var g = svg.selectAll('g')
.data(data)
.enter()
.append('g');

//Add rectangles to each g
var rect = g.selectAll("rect")
   .data(function(d){ return d })
   .enter()
   .append("rect")
   .attr('width', function(d){ d.year });

SVG和'g'元素似乎是正确创建的，正确的数据与'g'相关联，但最终的rect调用似乎不起作用。

有什么想法吗？

由于

Answer 1

看起来对象键导致了问题。通过利用inbuild'd3.values（d）'函数，我能够创建rects。

这是代码（注意第二行差异）：

var rect = g.selectAll("rect")
 .data(function(d){ return d3.values(d) })
 .enter()
 .append("rect")
 .attr('width', function(d,i){ console.log(d); return d });

并排图D3.js

1 个答案: