如何在图例中使用符号 [英] How Can I Use Symbols With a Legend

问题描述

我有一个传说，有彩色矩形...

I've got a legend, with colored rectangles...

我想用符号(即圆形，十字形，菱形，正方形)替换矩形.我不知道该怎么做.

I'd like to replace the rectangles with symbols (i.e., circle, cross, diamond, square). I can't figure out how to do that.

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

I've been using variations of .attr("d", d3.svg.symbol().type('circle'). For instance, I tried:

        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中提取的...就像对fill的d[1]一样.

d[2] is "supposed to be" pulling from legendData, as shown in the below code example...like it does with d[1] for the fill.

但是我从来没有看到任何变化.

But I don't ever see anything change.

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

Here's the code I'm using for the legend, without the symbol stuff, below. What am I doing wrong and how can I change the rectangles to symbols? Where do I need to add what?

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

推荐答案

这是我编写代码的方式.注意，我将数据绑定到包装器g元素，然后将每个图例项的符号和文本放入其中.然后，您可以放置​​g而不是分别放置文本和符号".这也消除了对数据进行双重绑定的需要.

Here's how I would code it. Notice, that I data-bind to a wrapper g element and then place the symbol and text into it for each legend item. You can then position the g instead of positioning the text and "symbol" separately. This also removes the need for double-binding the data.

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>

这篇关于如何在图例中使用符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！