Javascript D3使用点和线绘制具有范围（最小值、最大值）值的分类数据

我有一个数据集，它有三个字段：名称、最小值（

value2

）和最大值（

value

），它们代表一个范围

//The data
var data =[{"name": 'Scotty', "value2":0, "value":17},
 {"name":'Dick', "value2":10, "value":17},
 {"name":'James', "value2":5, "value":null},
 {"name":'Max', "value2":2, "value":9}]

目前，我用一个条形图来表示它，使用这个代码可以正常工作，除非点value2和value非常接近或者有空值

//Chart size parameters
var margin = {top: 20, right: 30, bottom: 90, left: 40},
    width = 830 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

//Chart axis
var x = d3.scaleBand()
    .domain(data.map(function(d) { return d.name; }))
    .range([2, width])
    .scaleBand(0.10);

var y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return d.value; })])
    .range([height, 0]);

var xAxis = d3.axisBottom(x);

var yAxis = d3.axisLeft(y);

//Initialize chart
var chart = d3.select("#mychart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  //Adding both axis
  chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)

  chart.append("g")
      .attr("class", "y axis")
      .call(yAxis);

 //Where the box is drawn
  chart.selectAll(".box")
      .data(data)
    .enter().append("rect")
      .attr("class", "box")
      .attr("x", function(d) { return x(d.name); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return y(d.value2) - y(d.value); })  //Plot range
      .attr("width", x.bandwidth()); //spacing for bars

是否有一种方法可以使用以下内容绘制数据：

• 如果存在两个点，则用连接它们的路径绘制这两个点
• 如果一个点在字段

  值中为空

  仅绘制一个点

---

在

缩放区添加
paddinginer
，这样您就不必使用
*0.9
分割数据（
filter
），并为每个数据创建一个表示您希望看到它的方式的绘图。@rioV8确定完成，不确定过滤器的事情，但我只想要一条代表范围的线，如果它是一个单一的值，第二个值为null，那么可以使用一个点或其他东西，以便可以看到该点。