0

我正在尝试使用 D3.js 绘制一些折线图。我发现了一些类似http://jsfiddle.net/BDWFW/的代码。

var w = 760;
var h = 400;
var pad = 50;
var d0 = new Date("Jan 29 2011 UTC");
var d1 = new Date("March 15 2011 UTC");
var x = d3.time.scale()  .domain([d0, d1]).range([0,w]);
var y = d3.scale.linear().domain([0, 1])  .range([h,0]);

var svg = d3.select("body")
    .append("svg:svg")
    .attr("height", h + pad)
    .attr("width",  w + pad)

var vis = svg.append("svg:g")
    .attr("transform", "translate(40,20)")

var rules = vis.append("svg:g").classed("rules", true)

function make_x_axis() {
  return d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .ticks(8)
}

function make_y_axis() {
  return d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(10)
}

rules.append("svg:g").classed("grid x_grid", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
      .tickSize(-h,0,0)
      .tickFormat("")
    )

rules.append("svg:g").classed("grid y_grid", true)
    .call(make_y_axis()
      .tickSize(-w,0,0)
      .tickFormat("")
    )

rules.append("svg:g").classed("labels x_labels", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
      .tickSize(5)
      // .tickFormat(d3.time.format("%Y/%m"))
    )

rules.append("svg:g").classed("labels y_labels", true)
    .call(make_y_axis()
      .tickSubdivide(1)
      .tickSize(10, 5, 0)
    )

正如我们在结果中看到的，所有网格线都连接到每个刻度。相反，我想选择特定的刻度并仅为这些刻度绘制网格线。不幸的是，我不确定如何使用 D3.js 做到这一点。例如，在这个例子中，我们如何为 Feb06、Feb20 和 Mar06 制作网格线？

有时候，我真的不明白 D3.js。看这个网格线绘制部分：

rules.append("svg:g").classed("grid y_grid", true)
    .call(make_y_axis()
      .tickSize(-w,0,0)
      .tickFormat("")
    )

我真的不确定这段代码是如何绘制网格线的。在链式函数中，我找不到哪一个这样做。像我这样的一些新手用户觉得一切都在黑盒中。

4

0 回答 0