如何使用带图例的符号

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.

但我没有看到任何变化.

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

        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而不是分别定位文本和"符号".这也消除了对数据进行双重绑定的需要.

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];
    });

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