javascript - d3.js 使用不同的数据创建相同的 svg 对象

Question

我有一个脚本，可以正常工作并创建我需要的和弦图。但现在我想在另一个 div 上创建相同的 .svg 文件，但矩阵不同。我应该为新的 svg 复制相同的脚本，还是可以用更有效的方式来做？

你可以找到我的代码here .

现在我的 .Js 脚本使用 drawChordWithMatrix(matrix_T1_T2) 在带有 id chart 的 div 上显示和弦我应该怎么做才能在 id chart1

上运行 drawChordWithMatrix(matrix_T2_T3)

Answer 1

我能想到的一种方法是

1) 将 SVG 创建移动到 drawChordWithMatrix

所以你需要传递你需要附加SVG的id。像这样的 function drawChordWithMatrix(matrix, id)，你可以在这样的函数中创建你的 SVG。

var svg = d3.select(id).append("svg")//selecting on basis of ID.
            .attr("width", (width + margin.left + margin.right))
            .attr("height", (height + margin.top + margin.bottom));

2) 接下来将所有函数(如 fade、fadeOnChord 等)移动到 drawChordWithMatrix 中，以便它们都具有相同的作用域。

工作代码here