d3 linkHorizo​​ntal直线曲线 [英] d3 linkHorizontal for straight line curves

问题描述

d3 linkHorizo​​ntal可以用于直线曲线吗?如果没有，我是否会缺少这种链接路径的任何d3功能?当然，我总是可以自己动手手动计算.

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.

来自

致

推荐答案

您可以使用 d3.curveStep ，它会创建一个带有直角拐角的路径:

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>

这篇关于d3 linkHorizo​​ntal直线曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！