D3 - 图例不会可视化答案

【问题标题】：D3 - legend won't visualizeD3 - 图例不会可视化
【发布时间】：2015-03-20 09:50:08
【问题描述】：

我尝试使用来自http://zeroviscosity.com/d3-js-step-by-step/step-3-adding-a-legend 的灵感来创建一个传奇。然而，尽管代码几乎完全相同，但图例并未可视化。这是 jsfiddle 和代码：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;
});

【问题讨论】：

标签： javascript d3.js visualization

【解决方案1】：

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

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

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

现在，您的工作所基于的示例有一个饼图，该饼图已经位于屏幕中心translated，因此负值不是问题。

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

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

【讨论】：