我试图理解D3和弦图是如何工作的。我的第一步是使用以下脚本显示图表的弧。但由于某种原因,弧线没有出现。
请参阅网页HERE
有人可以告诉我我错过了什么吗?
<body>
<script>
// Chart dimensions.
var width = 960,
height = 750,
innerRadius = Math.min(width, height) * .41,
outerRadius = innerRadius * 1.1;
//Create SVG element with chart dementions
var svg = d3. select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append ("g")
.attr("transform", "translate (" + width / 2 + "," + height / 2 + ")");
//------------Reformat Data ------------------------------------------
var matrix = []; // <- here is the data
d3.tsv('picData.tsv', function(err, data)
{
//console.log(data);
pictures = d3.keys(data[0]).slice(1);
//console.log(pictures);
data.forEach(function(row)
{
var mrow = [];
pictures.forEach(function(c)
{
mrow.push(Number(row[c]));
});
matrix.push(mrow);
//console.log(mrow);
});
//console.log('1st row: ' + matrix[0]);
//console.log(matrix);
});
//---------------- Define diagram layout ----------------------------
var chord = d3.layout.chord() //<-- produce a chord diagram from a matrix of input data
.matrix(matrix) //<-- data in matrix form
.padding(0.05)
.sortSubgroups(d3.descending);
var fill = d3.scale.category20(); //<-- https://github.com/mbostock/d3/wiki/API-Reference#d3scale-scales
//console.log(fill);
var g = svg.selectAll("g.group")
.data(chord.groups)
.enter().append("svg:g")
.attr("class", "group");
//console.log(g);
// create arcs
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
//console.log(arc);
g.append("path")
.attr("d", arc)
.style("fill", function(d) { console.log(d.index); return fill(d.index);})
.style("stroke", function(d) { return fill(d.index); })
.attr("id", function(d, i) { return"group-" + d.index });;
g.append("svg:text")
.attr("x", 6)
.attr("class", "picture")
.attr("dy", 15)
.append("svg:textPath")
.attr("xlink:href", function(d) { return "#group-" + d.index; })
.text(function(d) { return pictures[d.index]; });
//console.log(g);
</script>
</body>
答案 0 :(得分:2)
您的问题源于d3.tsv
is asynchronous:
在指定的URL处发出逗号分隔值(CSV)文件的HTTP GET请求...请求是异步处理的。
因此,您的所有代码都在&#34;定义图表布局&#34;在加载任何数据之前正在执行 。否则,您的代码工作正常(见下图)。所以,只需将您的所有代码移至d3.tsv(...)
来电,即可全部设置。
答案 1 :(得分:1)
您的脚本正在运行且没有错误,但是没有从您的数据连接创建任何元素。这通常表示您传入零长度数据数组。
事实上,你根本就没有传入阵列;你正在传递一个函数对象。当d3查找该对象的数组长度时,它返回undefined,强制转换为数字零,因此不会创建任何组和没有和弦。
您的代码的相关部分:
var g = svg.selectAll("g.group")
.data(chord.groups)
.enter().append("svg:g")
.attr("class", "group");
要实际获取和弦组数据对象的数组,您需要调用chord.groups()
。如果最后没有()
,chord.groups
就是函数作为对象的名称。
编辑添加:
哎呀,我甚至没有注意到你的绘图代码没有包含在你的d3.tsv
回调函数中。修复此问题,如mdml's answer中所述,然后解决上述问题。