Here is a plunker modified from mbostock
I want to make the text labels drag-able and attach a line to the circle when dragged.
.call(drag) works on the dots but not the labels
label = container.append("g")
.attr("class", "label")
.selectAll(".label")
.data(dots)
.enter().append("text")
.text(function(d) {return d.x + d.y; })
.attr("x", function(d) {return d.x; })
.attr("y", function(d) {return d.y; })
.attr("text-anchor", "middle")
.call(drag)
Here's a JSFiddle I made to demonstrate draggable text labels in D3.js
https://jsfiddle.net/h1n6fuwr/
Essentially you want to define the following variables/functions:
const drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended)
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
}
function dragged(d) {
const elem = d3.select(this)
elem.attr('x', +elem.attr('x') + d3.event.dx)
elem.attr('y', +elem.attr('y') + d3.event.dy)
}
function dragended(d) {}
And then call .call(drag) on your text labels.
const labels = ['Drag Me1', 'Drag Me2', 'Drag Me3']
d3.select('svg')
.selectAll('text')
.data(labels)
.enter()
.append('text')
.text(d => d)
.attr('fill', 'green')
.attr('x', (d, i) => 10 + i*30)
.attr('y', (d, i) => 15 + i*30)
.call(drag)
Append a rect behind the text, then .call(drag) on your rect. To get a suitable rect, you can use text.getBBox().
Related
I have a lot of success creating forceDirect layouts with a single line of text as a label for each node. Now I have a project where I need to add a list (multiple text) to each node.
I have been able to add multiple text to using the same model that works for adding a single label and a single to each node.
The label, rect, and multiline text are each added to separate but only the list of text is not "pinned" to the node.
var node = svg.append("g")
.attr("transform", "translate("+[margin.left, margin.top]+")")
.attr("class", "nodes")
.selectAll("rect")
.data(data.nodes)
.enter()
.append("rect")
.style("width",function(d){
return setRectWidth(d)
})
.style("height",function(d){
return 30
})
.attr("fill",function(d){
return setBackground(d)
})
//.attr("x",0)
.attr("rx",4)
.attr("ry",4)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
var text = svg.append("g")
.attr("class", "text")
.selectAll("txt")
.data(data.nodes)
.enter()
.append("text")
.attr("x", 0)
.text(function(d){
return d.label
})
.style("text-anchor","middle")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var subtext = svg.append("g")
.attr("class", "subtext")
.selectAll("subtext")
.data(data.node_items)
.enter()
.append("text")
.attr("x", 0)
.text(function(d){
return d.label
})
.style("text-anchor","middle")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
Here is the raw result
Note Subtext has no xy assigned
Here is what I am going for:
The tick function looks ok to me so I don't know what I am missing.
var ticked = function() {
node
.attr("x", function(d) { return d.x + setRectWidth(d)*-.5; })
.attr("y", function(d) { return d.y + setRectHeight(d)*-.5 });
link
.attr("d", function(d) {
var a = []
a.push({x: d.source.x,y:d.source.y});
a.push({x: d.target.x,y:d.target.y});
return line(a)
})
text
.attr("x", function(d) { return d.x })
.attr("y", function(d) { return d.y + setTextY(d) });
subtext
.attr("x", function(d) { return d.x })
.attr("y", function(d) { return d.y });
}
The solution I came up with was to add list times to each node as node items, then use the ticked function to iterate the list and re-assign the x, y positions based on the items index.
var ticked = function(){.....
nodeitems.attr("x", function (d) {
let new_x = d.fixed_x ? d.fixed_x : d.x;
return new_x - setRectWidth(d) * .4;
})
.attr("y", function (d, i) {
let new_y = d.fixed_y ? d.fixed_y : d.y;
return new_y + (i * row_height) + setTextY(d) + row_height + 5
});
You can see the working solution here - https://alqemist.github.io/EAGIR/erd/
Source code is here - look at erd folder
https://github.com/alQemist/EAGIR
I am trying implement labels on links in d3 v4 force layout. Although I am following code from a b.lock, I face difficulty to achieve the labelling. I am probably missing some basics at svg.selectAll and svg.append .
svg = d3.select("#svgdiv").append('svg').attr('width',width).attr('height',height).style("border","1px solid black"),
width = +svg.attr("width"),
height = +svg.attr("height");
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "black")
.style("pointer-events", "all")
.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed));
g=svg.append("g");
function zoomed() {
g.attr("transform", d3.event.transform);
}
link = g.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.edge)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); })
.attr("id",function(d,i) {return 'edge'+i});
node = g.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.node)
.enter().append("circle")
.attr("r", radius)
.attr("fill", function(d) { return color(d.group); })
.on("click", mouseClick(.2))
.on("dblclick", mouseDblClick)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
Till here, the code is ok. But when I add the following code for labelling, it stops working.
edgepaths =svg.selectAll(".edgepath")
.data(graph.edge)
.enter()
.append('path')
.attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
'class':'edgepath',
'fill-opacity':0,
'stroke-opacity':0,
'fill':'green',
'stroke':'yellow',
'id':function(d,i) {return 'edgepath'+i}})
.style("pointer-events", "none");
edgelabels =svg.selectAll(".edgelabel")
.data(graph.edge)
.enter()
.append('text')
.style("pointer-events", "none")
.attr({'class':'edgelabel',
'id':function(d,i){return 'edgelabel'+i},
'dx':80,
'dy':0,
'font-size':10,
'fill':'white'});
edgelabels.append('textPath')
.attr('xlink:href',function(d,i) {return '#edgepath'+i})
.style("pointer-events", "none")
.text(function(d,i){return 'label '+i});
function ticked() {
node
.attr("cx", function(d) { return d.x;})
.attr("cy", function(d) { return 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; });
edgepaths.attr('d', function(d) {
var path='M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y;
//console.log(d)
return path});
edgelabels.attr('transform',function(d,i){
if (d.target.x<d.source.x){
bbox = this.getBBox();
rx = bbox.x+bbox.width/2;
ry = bbox.y+bbox.height/2;
return 'rotate(180 '+rx+' '+ry+')';
}
else {
return 'rotate(0)';
}
});
}
please help.
thank you.
JSON data.
{
"edge":[
{"source":"source1","target":"target1","value":"1"},
{"source":"source2","target":"target2","value":"0"},
.
.
],
"node":[
{"group":0,"id":"source1"},
{"group":3,"id":"source2"},
.
.
]
}
I am working on a population pyramid that has an updating function.
http://bricbracs.com/hh/
As you can see the bars expand and contract in a horizontal line when you update it with new data. I want to modify the transition effect so that the bars enter and exit vertically like this:
http://vis.stanford.edu/jheer/d3/pyramid/shift.html
I have been following this tutorial and modifying the code but so far no luck.
https://strongriley.github.io/d3/tutorial/bar-2.html
Here is the code that first draws the bars on loading. (this is the male bar group, the female bar group is the same)
leftBarGroup.selectAll('.bar.left')
.data(data)
.enter()
.append('rect')
.attr('class', 'bar left')
.attr('y', function(d) { return yScale(d.group); })
.attr("width", 0)
.attr("opacity", 0)
.transition()
.duration(500)
.attr('width', function(d) { return xScale(d.male); })
.attr('height', yScale.rangeBand())
.attr("opacity", 1)
And here is the corresponding part of the code in the updating function which changes the bars.
var sel = leftBarGroup.selectAll('.bar.left')
.attr('class', 'bar left')
.data(data)
.data(data, function(d) { return d.male; })
.transition()
.attr('y',0)
.duration(500)
.attr('y', function(d) { return yScale(d.group); })
.attr('height', yScale.rangeBand())
.attr('width', function(d) { return xScale(d.male); })
.attr('height', yScale.rangeBand())
Thanks in advance.
Here's one way to reproduce the effect in your linked example. I offset the bars and then slide them back into place. You then handle the top and bottom bars slightly different.
Note, I only did the slide down on the male side of the pyramid, if you need help going the rest of the way just leave me a comment.
var sel = leftBarGroup.selectAll('.bar.left')
.attr('class', 'bar left')
.data(data)
.data(data, function(d) {
return d.male;
})
// offset y to slide down
.attr('y', function(d){
var self = d3.select(this);
return +self.attr('y') - yScale.rangeBand();
})
.transition()
.duration(500)
// slide it back into place
.attr('y', function(d) {
return yScale(d.group);
})
// and set new width
.attr('width', function(d) {
return xScale(d.male);
});
// for the very top bar
// not only slide it but "fade it in"
leftBarGroup.select(':last-child')
.style('opacity', 0)
.transition()
.duration(500)
.style('opacity', 1)
.attr('y', function(d) {
return yScale(d.group);
});
// append a fake bar on the bottom
// to slide and fade out
leftBarGroup.append('rect')
.attr('y', function(d) {
return yScale('0-4');
})
.attr('height', yScale.rangeBand())
.attr('width', function(){
return leftBarGroup.select(':first-child').attr('width');
})
.style('fill', 'steelblue')
.style('opacity', 0.6)
.transition()
.duration(500)
.attr('y', function(d) {
return yScale('0-4') + yScale.rangeBand();
})
.style('opacity', 0)
.remove();
EDITS
Going up is just a matter of reversing the logic:
var sel = leftBarGroup.selectAll('.bar.left')
.attr('class', 'bar left')
.data(data)
.data(data, function(d) {
return d.male;
})
// offset y to slide up
.attr('y', function(d){
var self = d3.select(this);
return +self.attr('y') + yScale.rangeBand()
})
.transition()
.duration(500)
// slide it back into place
.attr('y', function(d) {
return yScale(d.group);
})
// and set new width
.attr('width', function(d) {
return xScale(d.male);
});
// for the very bottom bar
// not only slide it but "fade it in"
leftBarGroup.select(':first-child')
.style('opacity', 0)
.transition()
.duration(500)
.style('opacity', 1)
.attr('y', function(d) {
return yScale(d.group);
});
// append a fake bar on the top
// to slide and fade out
var w = leftBarGroup.select(':last-child').attr('width');
leftBarGroup.append('rect')
.attr('class','fake')
.attr('y', function(d) {
return yScale('90+');
})
.attr('height', yScale.rangeBand())
.attr('width', w)
.style('fill', 'steelblue')
.style('opacity', 0.6)
.transition()
.duration(500)
.attr('y', function(d) {
return yScale('90+') - yScale.rangeBand();
})
.style('opacity', 0)
.remove();
Updated code sample here.
I have the following d3.js script to create bar chart which works fine.
I added functionality to show tool tip (not sure whether i added it at right place or not) which works fine but it has created an issue with existing mouseout event.
Issue:
The issue is that the following code is not working anymore. When i mouse over it does not turn into grey.
.on('mouseout', function (d) {
d3.select(this)
.attr('fill', 'blue');
However, if i comment the following lines than above mouseout event works perfect.
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
Complete Script
var jsonData = #Html.Raw(Json.Encode(Model));
data = jsonData;
InitChart();
function InitChart() {
var barData = data;
var vis = d3.select('#SummaryChart'),
WIDTH = 500,
HEIGHT = 375,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 150
},
xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) {
return d.Date;
})),
yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,
d3.max(barData, function (d) {
return d.Duration;
})
]),
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(0)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(0)
.orient("left")
.tickSubdivide(true);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Duration:</strong> <span style='color:red'>" + d.Duration + "</span>";
})
vis.call(tip);
vis.append('svg:g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')')
.call(xAxis);
vis.append('svg:g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + (MARGINS.left) + ',0)')
.call(yAxis);
vis.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("font-size", "20px")
.attr("x", WIDTH)
.attr("y", HEIGHT + 20)
.text("Time");
vis.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("font-size", "20px")
.attr("y", 100)
.attr("x",-100)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("Hours:");
vis.selectAll('rect')
.data(barData)
.enter()
.append('rect')
.attr('x', function (d) {
return xRange(d.Date);
})
.attr('y', function (d) {
return yRange(d.Duration);
})
.attr('width', xRange.rangeBand())
.attr('height', function (d) {
return ((HEIGHT - MARGINS.bottom) - yRange(d.Duration));
})
.attr('fill', 'blue')
.on('mouseover', function (d) {
d3.select(this)
.attr('fill', 'grey');
})
.on('mouseout', function (d) {
d3.select(this)
.attr('fill', 'blue');
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
}
</script>
Can someone point out what is wrong and how i cam make it working with both tooltip and on mouse turning into grey working both together?
Unlike jQuery, D3 allows only a single callback per action. Therefore if you attach two .on('mouseout') callbacks, only the last one will execute. See:
d3.select('div')
.on('mouseout', function() {console.log('A')})
.on('mouseout', function() {console.log('B')})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style='width:250px;height:250px;background:red'></div>
You have two ways around this. One, as suggested in comments, would be to call both attr and tooltip in the callback, as this:
.on('mouseout', function (d) {
d3.select(this).attr('fill', 'blue');
tip.hide();
}
Second would be to use the dot . notation, as described in the API, second paragraph
If an event listener was already registered for the same type on the selected element, the existing listener is removed before the new listener is added. To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as "click.foo" and "click.bar".
So in your case
.on('mouseout.attr', function (d) {
d3.select(this)
.attr('fill', 'blue');
})
.on('mouseout.tip', tip.hide)
Working example:
d3.select('div')
.on('mouseout.logA', function() {console.log('A')})
.on('mouseout.logB', function() {console.log('B')})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style='width:250px;height:250px;background:red'></div>
I'm relatively new to D3 and trying to add labels to a bar chart.. I keep running into the problem of labels applying all values to each label. Precedding this code is normal data load etc.
// Controls Bar Layout and Offset (x(d.weekOf)+20)
var property = svg.selectAll(".property")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) { return "translate(" + (x(d.weekOf)+20) + ",0)"; });
// Theese are the bars, width is the width of the bars
property.selectAll("rect")
.data(function(d) { return d.emissions; })
.enter().append("rect")
.attr("width", "80")
.attr("y", function(d) { return y(d.y1); })
.attr("height", function(d) { return y(d.y0) - y(d.y1); })
.attr("opacity", "0.7")
.style("fill", function(d) { return color(d.name); });
// Add Capacity Labels
property.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d, i) {return d.Internal; })
.attr("x", 41)
.attr("y", 210)
.attr("text-anchor", "middle");
Clearly I'm missing something simple..?
Your labels are a subselection of the property selection, so instead of using data() to join each property label to the entire dataset as you are, you should instead use data to join to the corresponding parent datum, like so:
property.selectAll("text")
.data(function(d) {return [d];})
.enter()
.append("text")
.text(function(d, i) {return d.Internal; })
.attr("x", 41)
.attr("y", 210)
.attr("text-anchor", "middle");