Question

我有一个带有彩色矩形的传奇......

我想用符号（即圆形，十字形，菱形，方形）替换矩形。我无法弄清楚如何做到这一点。

我一直在使用.attr("d", d3.svg.symbol().type('circle')的变体。例如，我试过：

        legendRect
            .attr("d", d3.svg.symbol().type(function (d) { return d[2] })

我试过了：

        legendRect.append("svg:path")
            .attr("d", d3.svg.symbol().type((d: any) => { return d[2] }))

d[2]“应该”来自legendData，如下面的代码示例所示......就像d[1]对fill一样。< / p>

但我没有看到任何变化。

以下是我用于图例的代码，没有符号内容，如下所示。我做错了什么，如何将矩形更改为符号？我在哪里需要添加什么？

        var legendData = [["OA", "yellow", "circle"], ["OI", "blue", "cross"], ["RARC", "green", "diamond"], ["CAPE", "red", "square"], ["Other", "black", "triangleDown"]];

        var legend = this.svg.append("g")
            .attr("class", "legend")
            .attr("height", 0)
            .attr("width", 0)
            .attr('transform', 'translate(-20,250)');

        var legendRect = legend.selectAll('rect').data(legendData);

        legendRect.enter()
            .append("rect")
            .attr("x", width - 65)
            .attr("width", 10)
            .attr("height", 10)
            ;

        legendRect
            .attr("y", function (d, i) {
                return i * 20;
            })
            .style("fill", function (d) {
                return d[1];
            })

        var legendText = legend.selectAll('text').data(legendData);

        legendText.enter()
            .append("text")
            .attr("x", width - 52);

        legendText
            .attr("y", function (d, i) {
                return i * 20 + 9;
            })
            .text(function (d) {
                return d[0];
            });

Answer 1

这是我如何编码的。请注意，我将数据绑定到包装器g元素，然后将符号和文本放入其中以用于每个图例项。然后，您可以定位g，而不是定位文本和＆＃34;符号＆＃34;分别。这也消除了对数据进行双重绑定的需要。

＆＃13;

var legendData = [["OA", "yellow", "circle"], ["OI", "blue", "cross"], ["RARC", "green", "diamond"], ["CAPE", "red", "square"], ["Other", "black", "triangleDown"]];

var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 500);

var legend = svg.append('g')
    .attr("class", "legend")
    .attr("height", 0)
    .attr("width", 0)
    .attr('transform', 'translate(20,20)');

var legendRect = legend
    .selectAll('g')
    .data(legendData);

var legendRectE = legendRect.enter()
    .append("g")
    .attr("transform", function(d,i){
      return 'translate(0, ' + (i * 20) + ')';
    });
    
legendRectE
    .append('path')
    .attr("d", d3.svg.symbol().type((d) => { return d[2] })) 
    .style("fill", function (d) {
        return d[1];
    });

legendRectE
    .append("text")
    .attr("x", 10)
    .attr("y", 5)
    .text(function (d) {
        return d[0];
    });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

Answer 2

这是一个使用符号表示图例的实现。您可以使用以下符号：

   svg.selectAll('.symbol')
     .data(legendData)
     .enter()
     .append('path')
     .attr('transform', function(d, i) {
       return 'translate(' + (20) + ',' + ((i * 20) + 10) + ')';
     })
     .attr('d', d3.symbol().type(function(d, i) {
         if (d[2] === "circle") {
           return d3.symbolCircle;
         } else if (d[2] === "cross") {
           return d3.symbolCross;
         } else if (d[2] === "diamond") {
           return d3.symbolDiamond;
         } else if (d[2] === "square") {
           return d3.symbolSquare;
         } else {
           return d3.symbolTriangle;
         }
       })
       .size(100))
     .style("fill", function(d) {
       return d[1];
     });

然后您可以设置如下传奇标签：

   svg.selectAll('.label')
     .data(legendData)
     .enter()
     .append('text')
     .attr("x", "40")
     .attr("y", function(d, i){ return ((i * 20)+15);})
     .text(function(d) {
       return d[0];
     });

在这里检查小提琴 - https://jsfiddle.net/zoxckLe3/

P.S。 - 以上解决方案使用d3 v4。要在v3中实现相同功能，请使用以下行.attr('d', d3.svg.symbol().type(function(d){return d[2];}))，而不是符合d[2]的符号名称部分。

Answer 3

要添加图片图标，您可以使用以下代码。

legend.append("**image**")
        .attr("x", 890)
        .attr("y", 70)
        .attr("width", 20)
        .attr("height", 18)
        .attr("xlink:href",function (d) {
            **return "../assets/images/dev/"+d+".png";**
        })

这对我有用..

如何在符号中使用符号

3 个答案: