Question

我是D3 v3 的新手，正在阅读有关基本线性和序数量表的一些教程。我正在修改教程中的一段代码。我想根据窗口的大小显示和缩放颜色。如果有更多数据，那么它应该再次均匀分布以适应所有数据。

＆＃13;

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

＆＃13;

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

＆＃13;

有人可以帮我解释上面提到的代码，并提供一些关于我做错的准则吗？

Answer 1

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

[Nan, Nan]

当然，你没有使用NaNs。

而不是那样，你正在寻找：

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

这是您更新的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

D3基于窗口大小的比例

1 个答案: