3

我有以下 D3 图表（使用 12842311 作为输入）： http ://www.uscfstats.com/deltas

加载图表后，单击网格按钮（仅在加载后）。将出现一个网格。明显的问题是垂直线只在图表的上半部分。

这是因为据我所知，D3 只允许您为刻度线的开头指定一个偏移量，这就是我的做法，然后不允许您指定一个结束偏移量。我还认为你必须用刻度线来做，否则你不知道刻度线的位置，除非你做一些复杂的事情。

我怎样才能绕过这个限制并在 x 轴上做一个垂直线的网格？好像应该不难。我什至会以正确的方式创建网格吗？

var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(15);

svg.append("g").attr("class","x axis").call(xAxis).attr("transform","translate(60, " + height + ")");
4

2 回答 2

2

我可以让它工作的最简单方法是手动调整大小和翻译tick标记。

  svg.selectAll(".y line")
      .attr("x2", width);

  svg.selectAll(".x line")
      .attr("y2", height)
      .attr("transform", "translate(0," + (-y(0)) + ")");

您可以在http://jsfiddle.net/2y3er/2/看到一个工作示例。

于 2012-10-17T02:45:51.363 回答
0

您可以制作两组刻度 SVG 元素，一组朝正方向延伸，另一组朝负方向延伸。

修改您的 d3 设置以包含另一个或两个轴，但这次在您的方法中包含修改后的tick参数：call

Dim xAxis = d3.svg.axis().scale(...).ticks(... // define your xAxis generator

Dim xAxisSVG = d3.selectAll(...)... // and your standared axis
        .call(xAxis);

Dim xPositiveTicks = d3.selectAll(...)... // positive grid lines
        .call(xAxis.tickSize(height));

Dim xNegativeTicks = d3.selecatAll(...)... // negative grid lines
        .call(xAxis.tickSize(-1 * height));

我知道这不是非常彻底，但这种方法过去对我来说效果很好。

于 2012-10-16T21:36:55.940 回答