Question

我尝试使用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;
});

Answer 1

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

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

由于您的translate规则中包含负值，因此图例位于屏幕外（它根本不可见）。

现在，您正在开展工作的示例的饼图已经translate d到屏幕中心，因此负值不是问题。

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

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

D3 - 传奇不会形象化

1 个答案: