Question

我显然很难理解在D3中包含g元素的基本内容，因为我试图渲染here。是否有人为什么或如何让这个图例在this legend之类的水平线上显示在顶部？

考虑：

var wrap = svg.selectAll('.legend').append('g').data(color.domain());
        var gEnter = wrap.enter().append('g').attr('class', 'legend')
            .append('g');
        var legend = wrap.select('g').style("width",1000)
            .attr("transform", function(d, i) { return "translate(" + i * 20 + ",0)"; });

        // draw legend colored circles
        legend.append("circle")
            .style("fill", color)
            .style('stroke', color)
            .attr('r', 5);

        // // draw legend text
        legend.append("text")
            .attr("x", width - 24)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { return d;});

提前致谢。

Answer 1

您需要使用translate和var legend = wrap.select('g').style("width",1000) .attr("transform", function(d, i) { return "translate(" + i * 80 + ",0)"; }); // draw legend colored circles legend.append("circle") .style("fill", color) .style('stroke', color) .attr('r', 5) .attr('transform', 'translate(550,20)'); // // draw legend text legend.append("text") .attr("dy", ".35em") .attr('transform', 'translate(560,20)') .text(function(d) { return d;})（转换方法）才能获得此效果。另外，另一个注释，图例的圆圈和文字真的没有任何联系。为了获得该效果，您必须使用正确的相应数学来定位它们。在我的解决方案中，我只使用静态数字，但你会得到要点。为了使其动态化，您将不得不创建一些动态计算位置的函数。

为了得到想要的行为，继承了我改变的内容：

sql

这里是小提琴：the documentation

在D3

1 个答案: