d3.js - 并排图 D3.js

Question

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

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

Json 对象 = 数据；

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)' 函数，我能够创建矩形。

这是代码（注意第二行的区别）：

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