Vue3 - D3 添加到单元格的路径 - 未可视化

Question

我使用《悲惨世界》中的数据找到了 Mike Bostock 邻接矩阵可视化的 GitHub 版本。

我将其转化为Vue3代码，并在这个社区的帮助下，得到了一个功能原型。

在我的离线 d3 代码中，我实现了一些 d3 代码，为每个单元格添加了路径，效果很好：

cell
.append("path")
.filter(function(d) { return ((d.z % 231== 0) | d.z ==231) })
.attr("d", "M 8.4 70 L 0 70 L 0 0 L 9.8 0 L 35 48.8 L 60 0 L 69.9 0 L 69.9 70 L 61.5 70 L 61.5 15 L 38.1 60 L 31.8 60 L 8.4 15.1 L 8.4 70 Z")
.attr("fill", "#030104")
.attr("opacity", function(d) {  return  z(d.z); })
.attr("class", "icon")
.attr("width", x.rangeBand())
.attr("height", x.rangeBand())
.attr("transform", function(d, i) {
                var scale = (x.rangeBand()/((this.getBBox()['height']+this.getBBox()['width'])/2)*0.9);
        var marginTop = (x.rangeBand()-(this.getBBox()['height']*scale))/2;
        var marginLeft = (x.rangeBand()-(this.getBBox()['width']*scale))/2;
            return "translate(" + (x(d.x)+marginLeft) + ", " + marginTop + ")scale("+ scale +")";
    })

但是，我无法让它在 Vue 中工作。我已经将 rangeBand 修复为带宽和其他一些小东西。但什么也没有显现出来。也许较新的 d3 版本不再支持此功能？

这里是 Vue3 格式的转换后的可视化的在线版本： https://codesandbox.io/s/sweet-gould-dejiuj?file=/src/components/Miserables.vue （点击Miserable链接，相关代码位于第1912行）。

Answer 1

主要问题是

path

元素附加到

rect

元素，但

rect

不能有子元素。另外，过渡值是

NaN

。

相反，我会将

rect

和

path

放入

g

元素中。然后，您可以单独翻译

g

，而不是

rect

和

path

：

    function fillrow(row) {

      const groups = d3
        .select(this)
        .selectAll(".cell")
        .data(row.filter((d) => d.z))
        .enter()
        .append('g')
        .attr("class", "cell") // <---- cell is now the group element
        .attr("transform", (d, i)  => `translate(${that.x(d.x)}, 0)`);
        
      groups
        .append("rect")
        .attr(...) // <---- won't set x
        
      groups
        .append("path")
        .attr(...) // <---- won't set translate
        
    }

并在您的

oder()

函数中：

    order(value) {
      this.x.domain(this.orders[value]);

      const t = this.svg.transition().duration(2500);

      t.selectAll(".row")
        .delay((d, i) => this.x(i) * 4)
        .attr("transform", (d, i) => `translate(0, ${this.x(i)})`)
        .selectAll('.cell')
        .attr("transform", (d)  => `translate(${this.x(d.x)}, 0)`); // <---- translate group instead of rect
      ...
    },

这也解决了路径变换中

NaN

的问题。

这里是更新的游乐场