Question

我正在尝试使用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("")
    )

我真的不确定此代码如何绘制网格线。在链式功能中，我无法找到那样做的人。像我这样的一些新手用户觉得一切都在Blackbox中。

D3.js - 如何为特定轴刻度绘制网格线

0 个答案: