问题描述
我有一个传说,有彩色矩形...
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>
这篇关于如何在图例中使用符号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!