1

我正在尝试重现与此类似的图表 - http://bl.ocks.org/syntagmatic/raw/3150059/

使用 d3 v4。这是我的带有更新代码的叉子 - http://bl.ocks.org/iamdeadman/a75c0a97459b131eccbc24e99c340ab8/321e048d287293525a9f23ae276025aa8916f7f6

由于在将上述块移植到 d3 v4 时发生了一些不正确/错误的更改，我现在看到的布局是这样的 -

在此处输入图像描述

即所有轴都移动到左右位置。

我怀疑这是因为在放置期间为轴提供了不正确的 x 比例。

所以，最初它们是这样初始化的 -

xscale = d3.scale.ordinal().rangePoints([0, w], 1),

＆我将其更改为- 

xscale = d3.scaleOrdinal().range([0, w], 1),

在此之后为他们所做的所有维度提取和创建比例 -

xscale.domain(dimensions = d3.keys(data[0]).filter(function(k) {
    return (_.isNumber(data[0][k])) && (yscale[k] = d3.scaleLinear()
      .domain(d3.extent(data, function(d) { return +d[k]; }))
      .range([h, 0]));
  }).sort());

所以现在，

var g = svg.selectAll(".dimension")
      .data(dimensions)
    .enter().append("svg:g")
      .attr("class", "dimension")
      .attr("transform", function(d) { console.log(d, xscale(d));  return "translate(" + xscale(d) + ")"; })

d所以现在在这里我得到 xscale 作为(0 / chart width-1)响应的所有值。不知道为什么。

任何人都可以在这里帮助查找/解决问题。

4

0 回答 0