d3平行坐标图表y轴与刻度线绘图问题

时间:2018-03-17 12:59:12

标签: javascript d3.js parallel-coordinates

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

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

由于在移植上述块时出现了一些错误/错误的更改 d3 v4我现在看到这样的布局 -

enter image description here

即。所有轴都移动到左边和正确的立场。

我怀疑这是因为在放置过程中向轴提供了不正确的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)响应。不知道为什么。

任何人都可以帮助找到/解决这个问题。

0 个答案:

没有答案