D3.JS SVG矩形不会出现

Question

我尝试创建分组条形图，就像在这个例子http://bl.ocks.org/kpq/6695897中一样，区别在于不是3列，每列2条，我想要1列3条。

我编写代码来创建基本形状，但矩形不会出现。屏幕只是空白。我对d3不太熟悉，而且控制台也没有显示任何错误，所以我无法发现错误。

y0，y1和x1是衡量标准，效果很好。

代码：

 var year = svg.selectAll(".g-year")
     .data(nestedData)
     .enter()
     .append("g")
     .attr("transform", function(d) { return "translate(0," + y0(d.key) + 
     ")" })
     .append("text")
     .text(function(d) { return d.key; })
     .attr("dy", 20)
     .attr("dx", -100);

 var metric = year.append('g')
     .selectAll('.g-metric-bars')
     .data(function (d) {
         return d.values;
     })
     .enter()
     .append('g')
    .attr('class', 'g-metric-bars')
     .attr('transform', function (d) {
         return 'translate(0 ,' + y1(d.key) + ')';
     })
     .append('g')
     .attr('class','bar')
     .append('rect')
     .attr('width', function(d){
         return x1(d.value);
     })
     .attr('height', y1.bandwidth())
     .attr('transform',function (d,i) {
         return "translate(0," + y1.bandwidth() + ")";
     })
     .attr('fill', 'black');

屏幕：

HTML：

Answer 1

在追加<text>元素后，您的year选择实际上只是一个文字选择：

var year = svg.selectAll(".g-year")
     .data(nestedData)
     .enter()
     .append("g")
     .attr("transform", function(d) { return "translate(0," + y0(d.key) + 
     ")" })
     .append("text")//from here on, a text selection
     .text(function(d) { return d.key; })
     .attr("dy", 20)
     .attr("dx", -100);

并且，由于<text>元素无法保留组（<g>），因此您可以获得空白屏幕的说明。

解决方案很简单：打破你的选择：

var year = svg.selectAll(".g-year")
     .data(nestedData)
     .enter()
     .append("g")
     .attr("transform", function(d) { return "translate(0," + y0(d.key) + 
     ")" });

var foo = year.append("text")
     .text(function(d) { return d.key; })
     .attr("dy", 20)
     .attr("dx", -100);

这样，year是包含<g>元素的输入选择。