d3中传说之间的平等空间

Question

我是使用d3库的新手,我试图在传说之间有相同的空间.在我工作的当前阶段 - 附加 - 不提供相等的空间.

我想知道我是如何解决的.

这是我到目前为止的代码:

var margin = { top: 20, right: 50, bottom: 30, left: 60 };

    self.drawLegends = function () {

            var legendData = [{ "color": "blue", text: "Normal Distribution" }, { color: "green", text: " Ave A" }, { color: "red", text: "Ave B" }]
            var legends = self.svg.selectAll("g legends").data(legendData);
            var legendBox = legends.enter()
                 .append("g")
                 .attr("transform", function (d, i) { return "translate(" + parseFloat((i + 1) * (($("#chart").width() - margin.left - margin.right) / 4)) + ",-10)" })

        var circles = legendBox.append("circle")
            .attr("r", 5)
            .attr("stroke", "black")
            .attr("fill", function (d, i) { return d.color })

        legendBox.append("text")
           .attr("dx", function (d) { return 10 })
           .attr("dy", function (d) { return 5 })
           .attr("fill","white")
           .text(function (d) { return d.text })
    },

Answer 1

这是一个更新的小提琴,我认为你在追求:http://jsfiddle.net/henbox/7Le4tc92/2/

当您第一次绘制circle,并text在每个g元素,不要使用转换.然后,选择每个g并获取文本长度(使用getComputedTextLength())以计算所需的翻译:

svg.selectAll("g")
    .attr("transform", function (d, i) {
        var x_pos = d3.select(this).select("text").node().getComputedTextLength() + 20;
        x_offset = x_offset + x_pos;
            return "translate(" + (x_offset - x_pos + margin.left) + ", 20)"
    })