D3 - 图例不会可视化

Question

我尝试使用来自 http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend. However, despite having almost the exact same code, the legend isn't visualized. Here's the jsfiddle and the code: http://jsfiddle.net/u5hd25qs/

的灵感来创造传奇

var width = $(window).width();
var height = $(window).height() / 2;


var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var legendRectSize = 36; // 18
var legendSpacing = 8; // 4
var recordTypes = []

recordTypes.push({
    text : "call",
    color : "#438DCA"
});

recordTypes.push({
    text : "text",
    color : "#70C05A"
});

var legend = svg.selectAll('.legend')
    .data(recordTypes)
    .enter()
    .append('g')
    .attr('class', 'legend')
    .attr('transform', function (d, i) {
        var height = legendRectSize + legendSpacing;
        var offset = height * recordTypes.length / 2;
        var horz = -2 * legendRectSize;
        var vert = i * height - offset;
        return 'translate(' + horz + ',' + vert + ')';
    });

legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d) {
    return d.color
})
.style('stroke', function (d) {
    return d.color
});

legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) {
    return d.text;
});

Answer 1

您的代码工作正常，但这是您生成的：

<g class="legend" transform="translate(-72,-44)">...

因为您的 translate 规则中有负值，所以图例 位于屏幕之外 （根本不可见）。

现在，您作为工作基础的示例有一个饼图，该饼图已 translated 到屏幕中央，因此负值不是问题。

您需要更改数学或将图例包装在某个容器中，您可以按照与饼图示例相同的方式进行定位：

legendContainer
  .attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');

D3 - 图例不会可视化

D3 - legend won't visualize

javascript

visualization

d3.js