D3.JS:y轴上零和起始值之间的锯齿线

我修改了D3条形图的

y.domain

，使其从零以上的值开始。然而，我想添加一条“之字形线”来表示这一点，如下图所示

---

我怎么能在D3中做到这一点？非常感谢

我会创建一些数据并将其传递给D3库。类似于此：

var data = [{
x1: xAxisSTARTPOINTX, //start
y1; xAxisSTARTPOINTY,
x2: firstXPointOnZigZag, 
y2; firstYPointOnZigZag},{
.
.
. },{
x1: lastXPointOnZigZag, //end
y1; lastYPointOnZigZag,
x2: yAxisSTARTPOINTX, 
y2; yAxisSTARTPOINTY}

}]

d3.select(container).data(data).enter().append('path')
.attr('x1', function(d){ return d.x1})
.attr('y1', function(d){ return d.y1})
.attr('x2', function(d){ return d.x2})
.attr('y2', function(d){ return d.y2})
.style('stroke','black');

您在两者之间放置的值将是您可以组成/生成的Z字形上的点

然后把这个传给这个：

var data = [{
x1: xAxisSTARTPOINTX, //start
y1; xAxisSTARTPOINTY,
x2: firstXPointOnZigZag, 
y2; firstYPointOnZigZag},{
.
.
. },{
x1: lastXPointOnZigZag, //end
y1; lastYPointOnZigZag,
x2: yAxisSTARTPOINTX, 
y2; yAxisSTARTPOINTY}

}]

d3.select(container).data(data).enter().append('path')
.attr('x1', function(d){ return d.x1})
.attr('y1', function(d){ return d.y1})
.attr('x2', function(d){ return d.x2})
.attr('y2', function(d){ return d.y2})
.style('stroke','black');

您可以自己生成点，以便通过更改for循环中的“i”来更改所需的“之字形”数量

创建点的函数，类似于：

    function createPoints(xAxisStartPoint, yAxisStartPoint){ //pass two arrays

        var xAxisStartX = xAxisStartPoint[0], //xAxisStartPointX
        xAxisStartY = xAxisStartPoint[1], //xAxisStartPointY
        yAxisStartX = yAxisStartPoint[0], //xAxisStartPointX
        yAxisStartY = yAxisStartPoint[1]; //yAxisStartPointY

    var difference = xAxisStartY-yAxisStartY; //gets the difference between xAxis and yAxis to make sure the points are equal distance apart.

        var allPoints = []; //array to populate with points
        var numberOfPoints = 4; //number of zigzags
        var movement = 20; //movement left and right

        for(var i=0;i<=numberOfPoints;i++){
           var thisPoint = [];
              if(i===0){ //push xAxisStartPoint
                 thisPoint.push({
                    x:xAxisStartX,
                    y:xAxisStartY
                 })
              } else if(i===4){ //push yAxisStartPoint
                 thisPoint.push({
                   x:yAxisStartX,
                   y:yAxisStartY
              })
              } else {
                  thisCalcPointX;

                  if(i%2 > 0){ //if i is odd move left
                      thisCalcPointX = xAxisStartX-movement; //move point to the left
                  } else { //if it's even move right
                      thisCalcPointX = xAxisStartX+movement; //move point to the right
                  }
                  thisCalcPointY = xAxisStartY + difference/i; //move point up from xAxis start point at equal distance between xAxis and yAxis
                  thisPoint.push({
                   x: xAxisStartX,
                   y: thisCalcPointY
              })


        }
    allPoints.push(thisPoint); //push this point to array of points


        }


        return allPoints; //return the points
        }

//then pass this to create the path 

     var xAxisStart = [ xAxisStartX, xAxisStartY];
     var yAxisStart= [ yAxisStartX, yAxisStartY];
     var dataPoints = createPoints([xAxisStart, yAxisStart])

     d3.select(container).data(dataPoints).enter().append('path')
         .attr('x1', function(d){ return d.x1})
         .attr('y1', function(d){ return d.y1})
         .attr('x2', function(d){ return d.x2})
         .attr('y2', function(d){ return d.y2})
         .style('stroke','black');

函数createPoints（xAxisStartPoint，yAxisStartPoint）{//传递两个数组
var xAxisStartX=xAxisStartPoint[0]，//xAxisStartPointX
xAxisStartY=xAxisStartPoint[1]，//xAxisStartPointY
yAxisStartX=yAxisStartPoint[0]，//xAxisStartPointX
yAxisStartY=yAxisStartPoint[1]；//yAxisStartPointY
var difference=xAxisStartY yAxisStartY；//获取xAxis和yAxis之间的差值，以确保点之间的距离相等。
var allPoints=[]；//用点填充的数组
var numberOfPoints=4；//锯齿的数量
var movement=20；//向左和向右移动
对于（vari=0；i0）{//如果i是奇数，则向左移动
thisCalcPointX=xAxisStartX movement；//向左移动点
}否则{//如果它是正确的，请向右移动
thisCalcPointX=xAxisStartX+movement；//向右移动点
}
thisCalcPointY=xAxisStartY+difference/i；//以xAxis和yAxis之间的相等距离从xAxis起点向上移动点
这一点，推({
x:xAxisStartX，
y:这是一家药店
})
}
所有点。推（此点）//将此点推送到点阵列
}
返回所有点//返回积分
}
//然后传递此消息以创建路径
var xAxisStart=[xAxisStartX，xAxisStartY]；
var yAxisStart=[yAxisStartX，yAxisStartY]；
var dataPoints=createPoints（[xAxisStart，yAxisStart]）
d3.select（容器）.data（数据点）.enter（）.append（'path'））
.attr（'x1'，函数（d）{返回d.x1}）
.attr（'y1'，函数（d）{返回d.y1}）
.attr（'x2'，函数（d）{return d.x2}）
.attr（'y2'，函数（d）{返回d.y2}）
.style（'stroke'，'black'）；

---

上面的代码没有经过测试，只是在运行中完成，可能需要使用，但逻辑应该可以在两个轴之间的任意一侧创建随机点。

我只是通过向y轴添加另一条路径来解决这个问题：

// define how much space you'd like to create the axis "break" in
var axisBreakSpace = 50;

// Add the X Axis, with the space
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (height + axisBreakSpace) + ")")
  .call(xAxis);

// Add the Y Axis, normally
var yG = svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);

// add the zigzags path
yG.append("path")
  .attr("d", function(){
    var numZags = 10, // number of zigzags
        zagDist = (axisBreakSpace - 5) / numZags; // y distance on each zig or zag, -5 is a bit of space to finish it off

    // build the path at
    var curZig = height,
        d = "M0," + curZig;
    for (var i = 0; i < numZags; i++){
      curZig += zagDist;
      d += (i % 2 === 0) ? " L10," + curZig : " L-10," + curZig;
    }

    // finish it off to the x-axis
    d += " L0," + (height + axisBreakSpace);
    return d;
  });

//定义要创建轴“打断”的空间大小
var-axisBreakSpace=50；
//添加X轴，其中包含空格
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度+轴断点空间）+”）
.呼叫（xAxis）；
//通常，添加Y轴
var yG=svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
//添加锯齿形路径
yG.append（“路径”）
.attr（“d”，函数（）{
var numZags=10，//锯齿数
zagDist=（axisBreakSpace-5）/numZags；//每个Z形或Z形上的y距离，-5是完成它的一点空间
//在以下位置建立路径：
var curZig=高度，
d=“M0，”+curZig；
对于（变量i=0；i

---

完整工作代码示例：

/*设置CSS*/
身体{
字体：12px Arial；
}
路径{
笔画：钢蓝；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
//设置画布/图形的尺寸
var保证金={
前30名，
右:20,，
底数：100，
左：50
},
宽度=600-边距。左侧-边距。右侧，
高度=270-页边距.顶部-页边距.底部，
axisBreakSpace=50；
//设定范围
var x=d3.scale.linear（）.range（[0，宽度]）
.域（[0,10]）；
变量y=d3.scale.linear（）.range（[高度，0]）
.域名（[2001000]）；
//定义轴
var xAxis=d3.svg.axis（）.scale（x）
.orient（“底部”）
var yAxis=d3.svg.axis（）.scale（y）
.东方（“左”）；
//界定界线
var line=d3.svg.line（）
.x（功能（d）{
返回x（d.x）；
})
.y（功能（d）{
返回y（d.y）；
});
//添加svg画布
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
var数据=d3.范围（10）.映射（函数（d）{
返回{
x:d，
y：（Math.random（）*800）+200
}
});
//添加valueline路径。
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，行（数据））；
//添加X轴
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”+（高度+轴断点空间）+”）
.呼叫（xAxis）；
//添加Y轴
var yG=svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）；
yG.append（“路径”）
.attr（“d”，函数（）{
var numZags=10，
zagDist=（axisBreakSpace-5）/numZags；
var curZig=高度，
d=“M0，”+curZig；
对于（变量i=0；i