我的 D3 穿孔卡片有几个问题(问题在这里:https://plnkr.co/edit/vIejaTBrGrV07B8UWxOb):
它看起来很拥挤,我设置了缩放,但我不知道如何将初始 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);
我无法让我的 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.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)上面的代码。
关于javascript - D3 穿孔卡中的轴问题 - 需要数据来扩展超过轴限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37712528/