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".
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
from How to add HTML code to D3 tree chart at node?
No comments:
Post a Comment