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);

}

以及小提琴http://jsfiddle.net/JL33M/

谢谢！

Answer 1

图表的宽度取决于您提供的range()。 range([0,100])将始终“拉伸”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()函数。

mbostock的

This tutorial描述了我所指的“一般更新模式”。然后，部件II和III继续解释如何将过渡转换为此模式。

D3线图未填充整个svg宽度

1 个答案: