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=".3.1/jquery.min.js"></script>
<script src="//d3js/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
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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//d3js/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
Share Improve this question edited Jul 16, 2018 at 9:26 Siddhartha esunuri asked Jul 13, 2018 at 6:32 Siddhartha esunuriSiddhartha esunuri 1,1441 gold badge17 silver badges29 bronze badges 3- Is the data you will pass to the tree going to contain the tickets, events, and links that you want to attach to the nodes? For example: var data = { name: 'foo', events: 10, tickets: 20, link: 'bar', children: [{...}] } – REEE Commented Jul 16, 2018 at 4:12
- In this code, I didn't added, But I'll add that data – Siddhartha esunuri Commented Jul 16, 2018 at 4:14
- I'll pass that data. if I found the solution – Siddhartha esunuri Commented Jul 16, 2018 at 4:15
2 Answers
Reset to default 5 +50I'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);.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744201532a4562901.html
评论列表（0条）