Menu
I'm using D3.js tree charts
Here, I want to add HTML code to show more data and apply anchor link on each text "tickets" and "events".
This is my jsbin
I'm expecting result should be shown in an image, add text like "tickets" and "events" and apply anchor link on that text
You can see that image, that tells what I expecting. I want to append text like that and add an anchor link on it. each node has 2 texts as I mentioned in this image.
Here my code
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="tree-container"></div>
</body>
</html>
CSS
.node {
cursor: pointer;
}
.overlay{
background-color:#EEE;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font-size:10px;
font-family:sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
.templink {
fill: none;
stroke: red;
stroke-width: 3px;
}
.ghostCircle.show{
display:block;
}
.ghostCircle, .activeDrag .ghostCircle{
display: none;
}
JS
node.select('text')
.attr("x", function(d) {
return d.children || d._children ? -10 : 10;
})
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.text(function(d) {
return d.name;
}).html(function(d) {
return "<p>"+d.name+"</p>";
});
if you need a full code please go here
269
I've never worked on anything that required me to use urls in an svg object before, so I'm not sure if the way I implemented it is the most efficient/correct. I would be interested in knowing if there is a more correct way to do this.
So here's a codepen of what I believe you wanted: https://codepen.io/anon/pen/WKrKmq?editors=0011
Building off of the code you provided from the d3.js collapsible tree bl.ock, I started by populating the treeData with the following properties; 'events', 'tickets', and 'url'. After that it was pretty simple:
nodeEnter.append('text')
.attr('x', function(d) {
return -15;
})
.attr('y', function(d) {
return 11
})
.text(function(d) {
return 'tickets - ' + d.tickets;
})
.on('click', function(d) {
window.location = d.url;
})
.style('font-size', '6px');
nodeEnter.append('text')
.attr('x', function(d) {
return -15;
})
.attr('y', function(d) {
return -5
})
.text(function(d) {
return 'events - ' + d.events;
})
.on('click', function(d) {
window.location = d.url;
})
.style('font-size', '6px');
I also increased the seperation between nodes here:
var tree = d3.layout.tree()
.separation(function(d) { return 5; })
.size([viewerHeight, viewerWidth]);
Have you tried to hard code an SVG with the tags you want? Normal HTML tags are not allowed inside an SVG tag. Just add the text like the tree node text and make them clickable.
What you need to do is at the point where you create the circle with the text and the .on('click', click); inside the g.node create two new g elements, one contains the circle and text and has the .on('click', click);. In the other add your new text elements and also make them respond to a .on('click', textClick);.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
