如何在 d3.js 中绘制罗盘形状并为每个三角形着色不同的颜色？
MOA*_*MOA 1 html javascript svg d3.js
我使用线生成器在 d3.js 中绘制了这个形状 - 想法是让它看起来像一个指南针。
左图：我所拥有的
右图：我想要的（只是中间的红/黑，而不是整个罗盘）。
我用来做这个的是：
function drawArrowCompass() { //draw arrow
var dataArrow = [
[35, 50],
[50, 0],
[65, 50],
[50, 100],
[35, 50]
];
var lineGenerator = d3.line();
var pathString = lineGenerator(dataArrow);
var compassArrow = d3.select("#noun_compass");
//draw arrow(s)
compassArrow.append("path")
.attr('d', pathString);
}
使用相应的 HTML：
<div id="compass">
<svg width="100" height="100" id="noun_compass"></svg>
</div>
但是，按照我的做法，我看不到向路径添加两种不同颜色的方法。有谁知道我如何在 d3.js 中绘制这样的形状？提前致谢！！
我这样做的方法是d为单个箭头创建一个路径数据（属性），其中路径的原点位于箭头的底部，然后使用相同的数据创建两条路径，但转换不同。这是健壮的，并允许轻松更改箭头的位置、方向和计数。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<input type="range" min="0" max="360" value="0" id="slider" oninput="updateAngle(this.value)">
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200)
.attr('viewBox', '-50 -50 100 100')
var path_d = "M 0,0 L 0,-10 L 50,0 L 0,10 Z";
function updateAngle(value) {
var angle = parseInt(value);
var data = [{
angle: angle,
color: 'black'
}, {
angle: (180 + angle) % 360,
color: 'red'
}];
paths = svg.selectAll('path')
.data(data);
paths.enter()
.append('path')
.attr('d', path_d)
.merge(paths)
.style('fill', d => d.color)
.attr('transform', d => `rotate(${d.angle})`);
paths.exit().remove();
}
updateAngle(0);
</script>
</body>