Javascript D3线图未填充整个svg宽度

正如标题所述，我创建了一个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);

}

​

还有小提琴

---

谢谢大家!

图形的宽度取决于您给定的

范围（）<代码>范围（[0100]）

将始终“拉伸”

域（）

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

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

当然，在这些条件下，图形宽度会随着数据集的增加而增加；如果你给它一个非常长的数据数组，比如说500个点，那么这个图形将有2500个单位宽，很可能会从屏幕上消失。但是如果你的数据是这样的，你知道它的最大长度，那么你就没事了

另一方面，我认为您的代码可以使用重构来减少重复性。您应该能够通过一个
update（）
函数实现您正在做的事情，而不需要
init（）
函数

请描述一下我所指的“一般更新模式”。部分，然后继续解释如何将转换转换到该模式。
图形的宽度取决于您给定的
范围（）<代码>范围（[0100]）
将始终“拉伸”
域（）

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

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

当然，在这些条件下，图形宽度会随着数据集的增加而增加；如果你给它一个非常长的数据数组，比如说500个点，那么这个图形将有2500个单位宽，很可能会从屏幕上消失。但是如果你的数据是这样的，你知道它的最大长度，那么你就没事了

另一方面，我认为您的代码可以使用重构来减少重复性。您应该能够通过一个
update（）
函数实现您正在做的事情，而不需要
init（）
函数

请描述一下我所指的“一般更新模式”。部分，然后继续解释如何将转换转换到该模式。
感谢您的详细回答！：）但有一件事让我有点困惑，那就是即使我指定了一个固定的宽度，图形也不会填满整个容器，我知道它可以缩放，但它是否应该将图形缩放到我给定的宽度和高度？在我看来，这是非常不一致的，即使它是有意义的，但在试图实现数据集之间的一致性时，它会产生一个真正的问题。因此，如果我理解正确，我的代码应该生成一个图，它可以拉伸到适合我指定要使用的整个宽度？这不是因为你在减去边距吗？如果它能够以某种合理的方式“拉伸”域值就好了。结果根本没有规律可循。有时，值越大，结果越小，结果越宽。有时情况正好相反。应该做的是，将最长的条设置为最大宽度，并按比例缩放所有其他条。感谢详细的回答！：）但有一件事让我有点困惑，那就是即使我指定了一个固定的宽度，图形也不会填满整个容器，我知道它可以缩放，但它是否应该将图形缩放到我给定的宽度和高度？在我看来，这是非常不一致的，即使它是有意义的，但在试图实现数据集之间的一致性时，它会产生一个真正的问题。因此，如果我理解正确，我的代码应该生成一个图，它可以拉伸到适合我指定要使用的整个宽度？这不是因为你在减去边距吗？如果它能够以某种合理的方式“拉伸”域值就好了。结果根本没有规律可循。有时，值越大，结果越小，结果越宽。有时情况正好相反。应该发生的是，将最长的条设置为“最大宽度”，并按比例缩放所有其他条。