gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:56:49 25 4
gpt4 key购买 nike

我的 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[] 按字母顺序排序。

它也很慢......

最佳答案

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.maparray.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)上面的代码。

关于javascript - D3 穿孔卡中的轴问题 - 需要数据来扩展超过轴限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37712528/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com