Question

我用D3绘制图表，其中节点是上面有名字的图片。我现在想在节点的右侧显示一些属性。

var node = svg.select(".nodes").selectAll(".node")
    .data(nodes, function(d) {return d.id});
var nodeEnter = node.enter()
    .append("g")
    .attr("class", function(d) { return "node "+d.type})
    .attr("id", function(d) { return d.label })
    .call(force.drag);
nodeEnter.filter(function(d) {return (d.properties)}).append("rect")
    .attr("x", -40)
    .attr("y", -50)
    .attr("width", 130)
    .attr("height", 90);

nodeEnter.filter(function(d) {return (d.imgB64)}).append("image")
    .attr("xlink:href", function(d) { return 'data:image/png;base64, ' + d.imgB64; })
    .attr("x", -40)
    .attr("y", -40)
    .attr("width", 80)
    .attr("height", 80);

d3.selectAll(node);
var textNode = nodeEnter.filter(function(d) { return (d.imgB64) && (d.name));
textNode.append("text")
    .attr("class", function(d) { return "text "+d.type; })
    .attr("text-anchor", function(d) { return (d.properties) ? "left" : "middle"})
    .attr("dx", -38)
    .attr("dy", function(d) { return (d.properties) ? -38 : 42})
    .text(function(d) {
        return d.name;
    });
var textNode = nodeEnter.filter(function(d) { return (d.properties)});
textNode.append("text")
    .attr("text-anchor", "left")
    .attr("dx", 40)
    .attr("dy", -30)
    .style("font-size",9)
    .text(function(d) { return "MW: "+d.properties.MW.toPrecision(3); });

上面的代码正确地在图像的右侧绘制了一个属性。我如何遍历每个节点的所有可用属性并将它们显示为列表。

每个节点数据的格式如下： {imgB64：＆＃34; ...＆＃34;，名称：＆＃34; A＆＃34;，属性：{MW：354，logP：4.6，pKd：-6.2，logPapp：-5.99}}

我尝试了以下内容：

var textNode = nodeEnter.filter(function(d) { return (d.properties)});
textNode.append("text")
    .data(function(d) { return d.properties })
    .attr("text-anchor", "left")
    .attr("dx", 40)
    .attr("dy", function(d,i) { return (i*15-30) })
    .style("font-size",9)
    .text(function(d) { return "foo" });

我收到错误消息＆＃34; TypeError：undefined不是对象（评估＆＃39; d.properties＆＃39;）＆＃34;。我应该如何创建新数据来处理属性？

代码在fiddle上共享感谢

Answer 1

根据echonax的建议，d.properties不是一个数组。

可以解决这个问题

.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {
    background: #FFF;
}

带

.data(function(d) { return jsonToArray(d.data) })

感谢echonax建议，如果冗余代码，我节省了很多。

如何在图形节点旁边绘制数据属性？

1 个答案: