javascript - D3 线图未填充整个 svg 宽度

Question

正如标题所述，我创建了一个 D3 线/面积图，我发现很难让图的宽度保持恒定，这取决于我给它渲染的数据量，它会缩放宽度相应地绘制图表，但我不确定如何让它保持恒定的宽度，无论给出的数据量如何，这就是我想要实现的目标。

我想这与 x 和 y 坐标的缩放有关，但我现在陷入困境，似乎无法弄清楚它为什么这样做。

这是我迄今为止的代码，

  //dimensions and margins
  var width = 625,
  height = 350,
  margin = 5,

  // get the svg and set it's width/height
  svg = d3.select("#main")
    .attr("width", width)
    .attr("height", height);

  //initialize the graph
  init([
        [12345,42345,32345,22345,72345,62345,32345,92345,52345,22345], 
        [1234,4234,3234,2234,7234,6234,3234,9234,5234,2234] 
      ]);

  $("button").live('click', function(){
      var id = $(this).attr("id");
      if(id == "one"){
        updateGraph([
                [52345,32345,12345,22345,62345,72345,92345,32345,22345,22345,52345,32345,12345,22345,62345,72345,92345,32345,22345,22345,52345,32345,12345,22345,62345,72345,92345,32345,22345,22345], 
                [4234,12345,2234,32345,6234,7234,9234,3234,2234,2234,4234,1234,2234,3234,6234,7234,9234,3234,2234,2234,4234,1234,2234,3234,6234,7234,9234,3234,2234,2234] 
              ]);
      }else if(id == "two"){
        updateGraph([
              [12345,42345,32345,22345,72345,62345,32345,92345,52345,22345,12345,42345,32345,22345,72345,62345,32345,92345,52345,22345,12345,42345,32345,22345,72345], 
              [1234,2345,3234,2234,7234,6234,3234,9234,5234,2234,1234,4234,3234,2234,7234,6234,3234,9234,5234,2234,1234,4234,3234,2234,7234] 
            ]);
      }

  });

function init(data){

  var x = d3.scale.linear()
    .domain([0,data[0].length])
    .range([margin, width-margin]),

  y = d3.scale.linear()
    .domain([0,d3.max(data[0])])
    .range([height-margin, margin]),

  /* line path generator */
  line = d3.svg.line().interpolate('monotone')
    .x(function(d,i) { return x(i); })
    .y(function(d) { return y(d); }),

  /* area path generator */
  area = d3.svg.area().interpolate('monotone')
    .x(line.x())
    .y1(line.y())
    .y0(y(0)),

  groups = svg.selectAll("g")
    .data(data)
    .enter()
    .append("g");

  svg.select("g")
    .selectAll("circle")
  .data(data[0])
  .enter()
    .append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 4);

  /* add the areas */
  groups.append("path")
    .attr("class", "area")
    .attr("d",area)
    .style("fill", function(d,i) { return (i == 0 ? "steelblue" : "red" ); });

  /* add the lines */
  groups.append("path")
    .attr("class", "line")
    .attr("d", line);
}

function updateGraph(data){

  var x = d3.scale.linear()
    .domain([0,data[0].length])
    .range([margin, width-margin]),

  y = d3.scale.linear()
    .domain([0,d3.max(data[0])])
    .range([height-margin, margin]),

  /* line path generator */
  line = d3.svg.line().interpolate('monotone')
    .x(function(d,i) { return x(i); })
    .y(function(d) { return y(d); }),

  /* area path generator */
  area = d3.svg.area().interpolate('monotone')
    .x(line.x())
    .y1(line.y())
    .y0(y(0));

  groups = svg.selectAll("g")
    .data(data),

  circles = svg.select("g")
    .selectAll("circle");

  circles.data(data[0])
      .exit().remove();

  circles.data(data[0])
    .enter().append("circle")
        .attr("class", "dot")
        .attr("cx", line.x())
        .attr("cy", line.y())
        .attr("r", 4);

  /* animate circles */
  circles.data(data[0])
    .transition()
    .duration(1000)
    .attr("cx", line.x())
    .attr("cy", line.y());

  /* animate the lines */
  groups.select('.line')
    .transition()
    .duration(1000)
    .attr("d",line);

  /* animate the areas */
  groups.select('.area')
    .transition()
    .duration(1000)
    .attr("d",area);

}

​

还有 fiddle http://jsfiddle.net/JL33M/

谢谢!

Answer 1

图表的宽度取决于您给它的range()。 range([0,100]) 始终会“拉伸(stretch)”domain() 值以占据 100 个单位。

这就是您的代码当前正在执行的操作:

var x = d3.scale.linear()
  .domain([0,data[0].length])
  .range([margin, width-margin]);// <-- always a fixed width

您希望宽度取决于数据条目的数量。假设您决定希望每个数据点占用 5 个单位，那么 range() 需要取决于数据集的大小:

var x = d3.scale.linear()
  .domain([0,data[0].length])
  .range([margin, 5 * data[0].length]);// <-- 5 units per data point

当然，在这些条件下，您的图表宽度会随着数据集的增加而增长；如果你给它一个非常长的数据数组，比如 500 个点，那么图表将有 2500 个单位宽，并且可能超出屏幕范围。但是，如果您知道数据的最大长度，那就没问题了。

在一个不相关的注释中，我认为您的代码可以使用重构来减少重复性。您应该能够使用单个 update() 函数来实现您正在执行的操作，而不需要 init() 函数。

This tutorial by mbostock 描述了我所指的“一般更新模式”。零件II和 III然后继续解释如何转换到此模式。