Javascript d3-在指定位置绘制网格线

如何在某些位置轻松绘制网格线

我想在x轴上垂直地（0，25，50，100，125，250，500，750，1k，1.5k，2k，3k，4k，5k，6k）画线

使用时，我无法控制网格线的绘制位置。 我还尝试使用传递指定位置的数组，但它不起作用

更新： 如果我使用

.data（xScale.ticks（15））//FIXME

的话，线并不是在刻度的正上方画的

如果我使用

.data（xScale.tickValues（[0,25,50,100,125,250,500,750]）

而不是

.data（xScale.ticks（15））//FIXME

不会绘制网格线

更新2:以下更改对我有效：

//specify where to draw all lines
var lines = [0, 25, 50, 100, 125, 250, 500, 750, 1000, 1500, 2000, 3000, 4000, 5000, 6000];

//use your specified lines as data
.data(lines)

这正好在我的行的指定位置写入。 您可以指定绘制所有线条的位置，或者只指定不存在记号的值，然后添加Cyril建议的

.innerTickSize（-h）

这里是我的代码（更新代码）：

---

您可以这样做来绘制网格线，只需扩展内部刻度大小

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickValues(scale)
    .innerTickSize(-h)//for extending  the grid line
    .tickFormat(d3.format("s"));

工作代码

编辑

要隐藏一些滴答声，可以执行以下操作：

//define scale and its related domain like this.
var scale = [0,25,50,100, 125,250,500,750,1000,2000,3000,4000,5000,6000];
var output = [0,20, 40, 80, 100,200,300,340,400,500,550,600,650,700];
//define ticks that not be displayed this means ticks will not be drawn for the array.
var scaleTicksNotDisplay = [250, 3000,5000]

// The axis uses the above scale and the same domain:
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickValues(scale)
    .innerTickSize(-h)
    .tickFormat(function(d){
      if (scaleTicksNotDisplay.indexOf(d)>=0){
       return "";//return blank for ticks inside scaleTicksNotDisplay
      } else {
         return d3.format("s")(d);
      }

    });

使用如下条件定义xaxis格式：

//define scale and its related domain like this.
var scale = [0,25,50,100, 125,250,500,750,1000,2000,3000,4000,5000,6000];
var output = [0,20, 40, 80, 100,200,300,340,400,500,550,600,650,700];
//define ticks that not be displayed this means ticks will not be drawn for the array.
var scaleTicksNotDisplay = [250, 3000,5000]

// The axis uses the above scale and the same domain:
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickValues(scale)
    .innerTickSize(-h)
    .tickFormat(function(d){
      if (scaleTicksNotDisplay.indexOf(d)>=0){
       return "";//return blank for ticks inside scaleTicksNotDisplay
      } else {
         return d3.format("s")(d);
      }

    });

工作代码

---

希望这有帮助

当您使用

.tickValues（）

时，它如何不起作用？请参阅.downvoter，如果您能在我的答案中解释您不喜欢的内容，以便我可以改进它。。。谢谢乍一看，我并没有想到这确实为这个问题提供了答案，这就是为什么我否决了这个答案。然而，我错了，但投票已经锁定。我做了一个小的编辑，然后立即回滚以再次解锁，并将其转换为向上投票。很抱歉给您带来了混乱，我把您的修订历史弄乱了；-）通过向下移动svg的高度，从每个记号上方的y坐标0绘制线的很酷的技巧。然而，有了这个，我只能在定义的记号上面画线。但是对于未定义的刻度线（根据我的示例数据为25、50、100、150、750、1.5k、3k、5k）上面的行呢？@jack在我上面的答案的编辑部分检查我的更新。很酷，这极大地减少了代码@Cyril您知道是否可以使用.innerTickSize（-h）绘制线，但也可以使用默认行为.innerTickSize（6），即也可以看到向下的小刻度？