D3初学者 - 有一些规模问题

时间:2016-12-15 21:18:39

标签: d3.js

我最近开始研究D3并发现了Scott Murray先生在alignedleft.com上的精彩入门教程。我目前正试图在scale上复制他的信息,但我遇到了一个我似乎无法解决的问题。我甚至复制并粘贴了他的代码,但它无法正常工作。

我可能正在使用比编写教程更新版本的D3而且我只是遗漏了版本中发生变化的东西?

我目前正在使用d3版本4.3.0

我正在使用的代码是

var dataset = [
          [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
          [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
        ];

var w = 500;
var h = 200;

var yScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) { return d[1]; })])
               .range([0, h]);
var xScale = d3.scale.linear()
               .domain([0, d3.max(dataset, function(d) { return d[0]; })])
               .range([0, w]);
var svg = d3.select("body").append("svg").attr("height", h).attr("width", w);

svg.selectAll("circle").data(dataset).enter().append("circle").attr("cx", function(d) {
  return xScale(d[0]);
}).attr("cy", function(d){
  return yScale(d[1]);
}).attr("r", 5);

任何指导或理由不起作用

1 个答案:

答案 0 :(得分:1)

D3.js第四版将从第三版中破解相当数量的代码。原因是版本4的“名称空间扁平化”。

以下与比例相关的方法已经改变:

d3.scale.linear ↦ d3.scaleLinear
d3.scale.sqrt ↦ d3.scaleSqrt
d3.scale.pow ↦ d3.scalePow
d3.scale.log ↦ d3.scaleLog
d3.scale.quantize ↦ d3.scaleQuantize
d3.scale.threshold ↦ d3.scaleThreshold
d3.scale.quantile ↦ d3.scaleQuantile
d3.scale.identity ↦ d3.scaleIdentity
d3.scale.ordinal ↦ d3.scaleOrdinal
d3.time.scale ↦ d3.scaleTime
d3.time.scale.utc ↦ d3.scaleUtc

因此,您的d3.scale.linear()应该阅读d3.scaleLinear()