当其中一个值满足以下条件时,我尝试附加另一个形状:
const keys = ["A", "B", "C", "D", "E", "E", "G"]
const colors = ['#1e90ff', '#008000', '#d3d3d3', '#d3d3d3', '#fe0000', '#ffa500', '#800080']
var triangle = d3.symbol().type(d3.symbolTriangle).size(500);
const colorOrdinalScale = d3
.scaleOrdinal()
.domain(keys)
.range(colors);
const svg = d3
.select("#container")
.append("svg")
.attr("class", "svg-area")
.attr("width", 600)
.attr("height", 500)
const legend = svg
.append('g')
.attr('id', 'legend')
.selectAll("symbols")
.data(keys)
.enter()
legend
.each(d => {
if (d === "D") {
console.log("triangle", d)
legend
.append("circle")
.attr("r", 15)
.style("fill", (d) => colorOrdinalScale(d))
.attr("transform", (d, i) => `translate(${100 + i * 70}, 20)`)
}
else {
console.log("circle", d)
legend
.append("path")
.attr("d", triangle)
.attr("fill", (d) => colorOrdinalScale(d))
.attr("transform", (d, i) => `translate(${100 + i * 70}, 20)`);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="container"></div>
当键等于D
时,它应该打印出一个三角形,其余的应该打印出一个圆。
据我所知,逻辑似乎起作用了。但结果是为每个基准打印三角形和圆形。但是,日志显示运行了相应的代码块。
基本上,这就是我期待的结果:
2条答案
按热度按时间mtb9vblg1#
因为你已经在使用
d3.symbol
了,所以你可以只对圆使用symbolCircle
,这样可以大大简化代码:另外,
each
没有什么意义,你在彼此之上附加了几个元素(你可能认为你有7个元素,但看看你的SVG,你有49个)。这是你的代码与这些变化:
rhfm7lfc2#
append(“circle)你在每个键上都附加了圆圈和三角形,在每个点上都附加了圆圈或三角形。我已经编辑了您的代码,以根据正在处理的索引过滤图例,并根据该索引进行转换。