d3js 缩放笔划宽度

Question

我目前正在画一些箭头，希望它们具有 different/scaling 笔画宽度（有些比其他的更粗）我目前正在使用此代码，但笔划宽度不会改变。如果我硬编码一个像 5 这样的值，它确实会更改为那个值。我在另一个代码中使用了完全相同的缩放比例，但我正在缩放条的高度（那里没有问题）。

这是我正在使用的fiddle：https://fiddle.jshell.net/42jdw2Lt/ 我想使用我标记为 "num" 的系列中的值来缩放我的笔划宽度。

    <!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

<script>

var svg = d3.select("body").append("svg")
 .attr("width", 1500)
 .attr("height", 1500);

var strwi = d3.scaleLinear()
          .domain([100, 400])
          .range([7,35])

var group = svg.append("g")

var series = [
             [{"x": 360, "y": 250, "num": 100}, {"x": 520, "y": 400, "num": 
             100}, {"x": 630, "y": 300, "num": 100}],
             [{"x": 71, "y": 45, "num": 200}, {"x": 32, "y": 39, "num": 
             200}, {"x": 43, "y": 70, "num": 200}],
             [{"x": 100, "y": 300, "num": 300}, {"x": 200, "y": 200, "num": 
             300}, {"x": 300, "y": 200, "num": 300}], [{"x": 101, "y": 202, 
             "num": 400}, {"x": 102, "y": 204, "num": 400}, {"x": 103, "y": 
             215, "num": 400}]
  ];

  var line = d3.line()
  .curve(d3.curveBasis)
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; });

   svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .attr("refX", 0)
    .attr("refY", 5)
    .attr("markerWidth", 14)
    .attr("markerHeight", 14)
    .attr("viewBox", "0 0 20 10")
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0,0 L 10,5 L 0,10 z")
    .style("fill", "black");

    group.selectAll(".line")
    .data(series)
    .enter().append("path")
    .attr("class", "line")
    .attr("stroke-width", function(d) {return strwi(d); })
    .attr("stroke", "black")
    .attr("fill", "none")
    .attr("d", line)
    .attr("marker-end", "url(#triangle)");

   </script>

Answer 1

我刚对代码做了一个couple of changes：

我将 stroke-width 和其他一些属性设置为样式
我使用系列的第一个元素及其 num 属性来计算宽度

代码现在是这样的，每个系列的粗细都不一样

group.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke-width", function(d) {return strwi(d[0].num); })
    .style("stroke", "black")
  .style("fill", "none")
    .attr("d", line)
    .attr("marker-end", "url(#triangle)");

d3js 缩放笔划宽度

d3js scaling stroke width

scale

stroke

d3.js