我正在尝试制作一个d3图表,它将有点代表我网站的菜单,我尝试按照其他指南添加超链接,但没有一个成功,每个对象都有一个不同的url指向:主页、关于、联系人等。。如果我添加超链接,我是否能够拖动对象?这意味着,如果我按住“单击”,它将被拖动,如果我单击对象,它将打开url
var w = 1000,
h = 800,
circleWidth = 5;
var palette = {
"lightgray": "#05386B",
"gray": "#FFFFFF",
"mediumgray": "#FFFFFF",
"blue": "#FFFFFF"
}
var colors = d3.scale.ordinal() // D3 Version 4
.range(["#05386B", "#379683" , "#5CDB95"]);
var nodes = [
{ name: "Skills"},
{ name: "HTML5", target: [0], value: 58 },
{ name: "JavaScript", target: [0, 1], value: 65 },
{ name: "Scss", target: [0, 1, 2], value: 52 },
{ name: "JAVA", target: [0, 3], value: 48 },
{ name: "IOT", target: [0,3,4], value: 40 },
{ name: "", target: [0,3,4,5], value: 36 },
{ name: "jQuery", target: [0, 1, 2], value: 52 },
{ name: "RaspberryPi", target: [0, 1, 2, 8], value: 37 },
{ name: "", target: [0,1,2], value: 20 },
{ name: "Wordpress", target: [0,1,2,3,9], value: 67 },
{ name: "Git", target: [0,1,2,3,4,5,6,7,8,10], value: 68 },
{ name: "", target: [0,1,2,7,8 ], value: 16 },
{ name: "", target: [0,1,2,7,8], value: 25 },
{ name: "Linux", target: [0,1,2,3,4,5,6,7,8,9,10,11,12], value: 45 },
{ name: "", target: [0,1,2,7,8], value: 25 },
{ name: "Adobe Suite", target: [0,1,2,12], value: 57 },
{ name: "", target: [0,9,10], value: 20 },
{ name: "", target: [0,9,10], value: 37 },
];
var links = [];
for (var i = 0; i < nodes.length; i++){
if (nodes[i].target !== undefined) {
for ( var x = 0; x < nodes[i].target.length; x++ )
links.push({
source: nodes[i],
target: nodes[nodes[i].target[x]]
});
};
};
var myChart = d3.select('body')
.append("div")
.classed("svg-container", true)
.append('svg')
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 1000 800")
.classed("svg-content-responsive", true)
var force = d3.layout.force()
.nodes(nodes)
.links([])
.gravity(0.1)
.charge(-1000)
.size([w,h]);
var link = myChart.selectAll('line')
.data(links).enter().append('line')
.attr('stroke', palette.lightgray)
.attr('strokewidth', '1');
var node = myChart.selectAll('circle')
.data(nodes).enter()
.append('g')
.call(force.drag);
node.append('circle')
.attr('cx', function(d){return d.x; })
.attr('cy', function(d){return d.y; })
.attr('r', function(d,i){
console.log(d.value);
if ( i > 0 ) {
return circleWidth + d.value;
} else {
return circleWidth + 35;
}
})
.attr('fill', function(d,i){
if ( i > 0 ) {
return colors(i);
} else {
return '#fff';
}
})
.attr('strokewidth', function(d,i){
if ( i > 0 ) {
return '0';
} else {
return '2';
}
})
.attr('stroke', function(d,i){
if ( i > 0 ) {
return '';
} else {
return 'black';
}
});
force.on('tick', function(e){
node.attr('transform', function(d, i){
return 'translate(' + d.x + ','+ d.y + ')'
})
link
.attr('x1', function(d){ return d.source.x; })
.attr('y1', function(d){ return d.source.y; })
.attr('x2', function(d){ return d.target.x; })
.attr('y2', function(d){ return d.target.y; })
});
node.append('text')
.text(function(d){ return d.name; })
.attr('font-family', 'Raleway', 'Helvetica Neue, Helvetica')
.attr('fill', function(d, i){
console.log(d.value);
if ( i > 0 && d.value < 10 ) {
return palette.mediumgray;
} else if ( i > 0 && d.value >10 ) {
return palette.mediumgray;
} else {
return palette.blue;
}
})
.attr('text-anchor', function(d, i) {
return 'middle';
})
.attr('font-size', function(d, i){
if (i > 0) {
return '.8em';
} else {
return '.9em';
}
})
force.start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
1条答案
按热度按时间wkftcu5l1#
您可以添加一个
a
元素添加到g
代表每个节点:然后继续将文本和圆圈添加到
node
现在是父母了a
元素,在本例中,它的功能与g
(您可以对其应用变换,因此无需修改勾号函数):一个足够短的拖动可能会触发一次点击并打开链接-在d3v4+中,我相信您对这条分界线有更多的控制,尽管我不记得d3v3是如何处理这一点的(毕竟我们现在使用的是v7)。
你甚至可以取消这个
g
共入a
元素,但我将干预保持在最低限度以上