D3比例根据窗口大小

我是D3 v3 的新手，并且正在通过基本的线性和序数尺度进行一些教程。我正在修改教程中的一件代码。我想根据窗口的大小显示和缩放颜色。如果有更多数据，则应该再次均匀地安排空间以适合所有数据。

var data = [0,1,2,3,4,5,6,7,8];
var colorScale = d3.scale.category10();
var padding = 2, dataLength = data.length;
var Xscale = d3.scale.linear()
    .domain([data.min, data.max])
    .range([0,window.innerWidth]); 
var svg = d3.select("body")
    .append("svg")
    .attr({
        "width" : window.innerWidth,
        "height" : window.innerHeight
    });
var rects = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect");
rects.attr({
    "fill": function(d) {return colorScale(d);},
    "x" : function(d , i) {return Xscale(d);},
    "width" : window.innerWidth / dataLength - padding,
    "height" : 50
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <script type="text/javascript"></script>
</body>
</html>

有人可以帮助我使用上述代码，并提供有关我做错了什么的准则？

max和 min不是 data的属性，它只是一个平坦的数组。因此，没有data.max或data.min，您的Xscale域现在是：

[Nan, Nan]

当然，您不会随身携带任何地方。

您正在寻找：

.domain([d3.min(data), d3.max(data)])

这是您的更新代码：

var data = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var colorScale = d3.scale.category10();
var padding = 2,
  dataLength = data.length;
var Xscale = d3.scale.linear()
  .domain([d3.min(data), d3.max(data)])
  .range([0, window.innerWidth]);
var svg = d3.select("body")
  .append("svg")
  .attr({
    "width": window.innerWidth,
    "height": window.innerHeight
  });
var rects = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect");
rects.attr({
  "fill": function(d) {
    return colorScale(d);
  },
  "x": function(d, i) {
    return Xscale(d);
  },
  "width": window.innerWidth / dataLength - padding,
  "height": 50
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

相关内容

最新更新

热门标签：