d3 linkHorizontal for straight line curves

问题

Can d3 linkHorizontal be used for straight line curves? If not, am I missing any d3 feature for that kind of link path? Of-course I can always go manual and calculate it myself.

From

To

回答1:

You could use d3.curveStep, which creates a path with right-angle corners:

 var link = d3.line()
      .x(function(d,i) { return xScale(i); })
      .y(function(d,i) { return yScale(d); })
      .curve(d3.curveStep);
    
    var width = 500
    var height = 500
    var margin = 25
    
    var data = [
      [3, 7]
    ]
    
    var xScale = d3.scaleLinear()
    	.domain([0, 1])
    	.range([0, width])
    
    var yScale = d3.scaleLinear()
    	.domain([0, 10])
    	.range([height, 0])
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin + margin)
      .attr("height", height + margin + margin)
    
    var g = svg.append("g")
      .attr("transform", "translate(" + margin + "," + margin + ")")

    var points = g.selectAll("g")
    	.data(data)
    	.enter()
    	.append("g")
    
    points.append("path")
    	.datum(d => d)
    	.attr("d", link)
    	.style("stroke", "black")
    	.style("fill", "none")
    
    points.selectAll("circle")
    	.data(d => d)
    	.enter()
    	.append("circle")
    	.attr("cx", (d,i) => xScale(i))
    	.attr("cy", (d) => yScale(d))
    	.attr("r", 5)
    	.style("stroke", "none")
    	.style("fill", "black")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

来源：https://stackoverflow.com/questions/60867684/d3-linkhorizontal-for-straight-line-curves