javascript - D3 穿孔卡中的轴问题 - 需要数据来扩展超过轴限制

Question

我的 D3 穿孔卡片有几个问题(问题在这里:https://plnkr.co/edit/vIejaTBrGrV07B8UWxOb):

1. 它看起来很拥挤，我设置了缩放，但我不知道如何将初始 View 设置为更“可读”的比例，使点间距更大。我计划为圆点添加工具提示和不同的半径。

           //Create scale functions
       var xScale = d3.scale.linear()
                            .domain([1900, 2020])
                            .range([0, w]);
   
       var yScale = d3.scale.linear()
                            .domain([0, (deptlist.length)])
                            .range([h, 0]);
   
            //console.log(deptlist.length);
   
       //var rScale = d3.scale.linear()
                            //.domain([0, d3.max(dataset, function(d) { return d[1]; })])
                            //.range([2, 5]);
   
       //Define X axis
       var xAxis = d3.svg.axis()
                         .scale(xScale)
                         .orient("bottom")
           .tickFormat(function(d) {
               //console.log(d);
               return d;
             });
   
       //Define Y axis
       var yAxis = d3.svg.axis()
                         .scale(yScale)
                         .orient("left")
           .tickFormat(function(d) {
               //console.log(deptlist[d]);
               return deptlist[d];
             })
           .ticks(deptlist.length - 1);
   

2. 我无法让我的 deptlist[] 按字母顺序排序。

它也很慢......

Answer 1

1。更好区分圆圈

如果您最初使点变小，然后在缩放级别增加时使它们变大，您将能够更好地区分这些点。

d3.selectAll('.dot')
  // ...
  .attr('r', 2)

然后当您放大时，您可以使 r 值成为 xScale.domain 中值之间差异的乘积。例如……

function zoomed() {

  svg.selectAll(".dot")
        .attr("cx", function(d) { return xScale(+d.year); })
        .attr("cy", function(d) { return yScale(deptlist.indexOf(d.dept)); })
        .attr('r', function(d) {
          return 120 / (xScale.domain()[1] - xScale.domain()[0]);
        });

  svg.select(".x.axis").call(xAxis);
  svg.select(".y.axis").call(yAxis);

}

缩放点的方法有很多种，这只是其中一种方法。您的 xScale.domain() 返回您的 xScale 的域，例如，[1900, 2020]。通过从第二个值中减去第一个值，我们得到一个可以用作引用点的值，可以从中缩放点。

我简单地取了最大可能的差值 120，然后将它除以比例的当前值(在缩放时会发生变化)。缩放增加得越多，这个值就越大。

2。按字母顺序对 Y 轴排序

使用一些 D3's array methods您可以使您的代码更具声明性。

而不是这样做:

  var deptlist = [];

  dataset.forEach(function(d) {
    if(deptlist.indexOf(d.dept) == -1) deptlist.push(d.dept);
  });

您可以使用 d3.map、array.keys() 和 d3.descending 来 (a) 仅返回 d.dept 到您的数组，(b) 仅从数组中获取唯一值，并且 (c) 使用 JS native sort array method结合d3.ascending按字母顺序对它们进行排序。

  var deptlistUnsorted = d3.map(dataset, function(d) {
    return d.dept;
  }).keys();

  var deptlist = deptlistUnsorted.sort(d3.descending);

---

最后一点，您的代码运行缓慢，因为您在包含数千个对象的数组的 forEach 循环中有一个 console.log 语句。这会给浏览器带来很大的压力，在处理这种大小的数组时通常应该避免这种情况。

我更新了你的 plunkr以反射(reflect)上面的代码。