javascript - 如何在 d3.js 中绘制罗盘形状并为每个三 Angular 形着色不同？-6ren

javascript - 如何在 d3.js 中绘制罗盘形状并为每个三 Angular 形着色不同？

转载作者：行者123 更新时间：2023-11-28 05:10:42

我使用线生成器在 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>