I have the code that is in the following jsbin, I have dragging enabled for either of the circles at the end of a line.
What I want to do is move the other elements so the line moves with the circle.
How can I apply other transformations to other elements in the ondrag handler?
I just want advice and not code because this is a good learning exercise for me.
One of the many ways:
Add a style to the circle to mark the start and end of a circle.
var line = {
start: {x: 2, y: 3, type: "start"},
finish: {x: 14, y: 6, type: "end"}
};
//adding this type to the class of the circle
var circles = g
.selectAll('circle')
.data(lineData)
.enter().append("circle")
.attr('class', function(d){return "circle "+d.type;})
.attr('cx', function(d){return xScale(d.x);})
.attr('cy', function(d){return yScale(d.y);})
.attr('r', 10)
.style('fill', 'red')
.call(drag);
Then on drag updating the lines x1/y1 x2/y2 depending on the class of the circle dragged.
if (d3.select(this).classed("start")){
//update the start position of line
d3.select(".line").attr("x1", d3.event.x).attr("y1", d3.event.y);
} else {
d3.select(".line").attr("x2", d3.event.x).attr("y2", d3.event.y);
Full code here.
Related
I'm playing with d3.js and I noticed a weird behavior with dragging.
If I add a circle using data and scaleX/scaleY, when I drag it the d3.event.y value is relative to the xy coordinates inside the "data" array, instead of the top left corner...
Here is the code and a jsFiddle: if you open the console, if you drag the first circle the reference is the top left corner, if you drag the second circle the reference is something related to {x: 3, y: 2}
var circle2 = svgGraph
.selectAll('.circle2')
.data([{ x: 3, y: 2 }])
.enter()
.append('circle') // Uses the enter().append() method
.attr('cx', scaleX(100))
.attr('cy', scaleY(100))
.attr('r', 15)
.call(d3.drag()
.on('start', (d) => { })
.on('drag', onHandlerDrag())
.on('end', (d) => { }));
function onHandlerDrag() {
return (d) => {
console.log(d3.event.y);
}
}
Is the behavior intended? Do you have any reference about it?
Thanks
Yes, this is the intended behaviour. In fact, we normally use those x and y properties in a drag event to avoid the element jumping around the container (when one is lazy enough to specify the correct subject).
Since you asked for a reference, have a look at drag.subject:
The subject of a drag gesture represents the thing being dragged. It is computed when an initiating input event is received, such as a mousedown or touchstart, immediately before the drag gesture starts.
Then, in the next paragraph, the most important information to you:
The default subject is the datum of the element in the originating selection (see drag) that received the initiating input event; if this datum is undefined, an object representing the coordinates of the pointer is created. When dragging circle elements in SVG, the default subject is thus the datum of the circle being dragged. (emphasis mine)
And finally:
The returned subject should be an object that exposes x and y properties, so that the relative position of the subject and the pointer can be preserved during the drag gesture.
So, if you don't want the x and y in the datum being used by drag, just set a different object in the subject:
.subject(function() {
return {
foo: d3.event.x,
bar: d3.event.y
};
})
Here is your code with that change:
function onHandlerDrag() {
return (d) => {
console.log(d3.event.y);
}
}
var scaleX = d3
.scaleLinear()
.domain([0, 500])
.range([0, 500]);
var scaleY = d3
.scaleLinear()
.domain([0, 500])
.range([0, 500]);
var svgGraph = d3
.select('.area')
.attr('width', 500)
.attr('height', 500);
var circle1 = svgGraph
.append('circle')
.attr('cx', scaleX(20))
.attr('cy', scaleY(20))
.attr('r', 15)
.call(d3.drag()
.on('start', (d) => {})
.on('drag', onHandlerDrag())
.on('end', (d) => {}));
var circle2 = svgGraph
.selectAll('.circle2')
.data([{
x: 3,
y: 2
}])
.enter()
.append('circle') // Uses the enter().append() method
.attr('cx', scaleX(100))
.attr('cy', scaleY(100))
.attr('r', 15)
.call(d3.drag()
.subject(function() {
return {
foo: d3.event.x,
bar: d3.event.y
};
})
.on('start', (d) => {})
.on('drag', onHandlerDrag())
.on('end', (d) => {}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg class='area'></svg>
I have a D3 timeseries chart made up of line path and at each data point i use a circle which is appended to the lines. The circles have a mouse enter event attached to it and when the mouse is moved over the circle it displays the tooltip with the information about that data point and i also change the class of the circle so that it looks highlighted.
The problem i have got is, when the mouse is over the circle and the circle is highlighted and the tooltip is showing, at the same time if i get some new data and the chart is updated, the circle my mouse is over does not disappear even when the mouse is removed off the circle and it shows that circle hanging in the middle without being attached to any line.
I have attached the image of the chart showing the problem.
Any help to fix this problem will be highly appreciated.
Image showing d3 issue
Here's the jsfiddle code showing the issue. Try pointing your mouse to the circle and wait for the chart to update every 5 seconds
(Moving this from the comment section)
Take a look at this: https://jsfiddle.net/xvLgq8mn/
In the updateChart function you select by the circle class:
// update the circles at each data points
svg.selectAll('.circle') // here you correctly select all with the circle class
.data(this.props.data)
.attr('class', 'circle all')
.transition()
.duration(500)
.attr('cx', (d) => { return this.axis.x(d.time);})
.attr('cy', (d) => { return this.axis.y(d.count);});
but here, on mouseover, you remove the circle class and replace it with circle--highlight:
group.selectAll()
.data(this.props.data)
.enter().append('circle')
.attr('class', 'circle all')
.attr('cx', (d) => { return this.axis.x(d.time);})
.attr('cy', (d) => { return this.axis.y(d.count);})
.attr('r', 4)
.on('mousemove', function(d) {
// START: Show tooltip
div.transition()
.duration(1000)
.style('opacity', 1);
div.html('<div class="date--time">'
+ d.time
+ '</div><div class="count">' + d.count + ' incidents</div>')
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pageY - 70) + 'px');
d3.select(this)
.attr('r', 6)
.attr('class', 'circle--highlight'); // here you change the class from circle all
// to just circle--highlight,
// so when you are hovering a circle and the chart changes,
// the circle you have hovered won't be updated because
// it won't be selected due to the class difference
// END: Show tooltip
})
.on('mouseleave', function() {
// hide tooltip and return the circles to original style
div.transition()
.duration(500)
.style('opacity', 0);
// set the circle back to normal
d3.select(this)
.attr('r', 4)
.attr('class', 'circle all');
});
So a solution would be to also add the circle class along with the circle--highlight like this:
d3.select(this)
.attr('r', 6)
.attr('class', 'circle circle--highlight');
Or change your select in the updateChart like this:
svg.selectAll('circle')
but that would need many more adjustments to your script in order for it to work as expected.
Hope this helps! Good luck!
Say I have a path I created with d3 something like:
line = d3.line()
.curve(d3.curveLinear)
.x(function(d) { return x(d.x);})
.y(function(d) { return y(d.y); });
data = [{x: 0, y: 0}, {x: 5, y: 5}, {x:10, y:10}];
myLine = svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.datum(data)
.attr("d", line);
This makes a nice diagonal line from 0 to 10. Now if I update my data to make some changes and add some points:
data = [{x: 1, y: 1}, {x:2, y:3}, {x: 6, y: 7}, {x:9, y:9}];
And update my line
myLine.datum(data).transition().duration(1000).attr("d", line);
It gives a weird transition where it slides the existing path to fit the first three points of the new path and awkwardly adds the final point to the end.
Similarly, if I update it to have fewer points, it shortens the line and then slides the remainder over, instead of just reshaping the line where it is.
I understand why this happens, but I'm wondering if there's a way to create a more smooth transition.
You should have a look at this page and this github
.attrTween('d', function () {
return d3.interpolatePath(line(data), line(data2));
});
Have a look at this fiddle
Apologies for such a basic question. Is it possibly to fill the area between two lines?
For example, I have historical high/low temperature data. I'd like to create a shaded area between these two timeseries.
I've tried using the area feature of a lineChart like this:
return [
{
values: tsData.normal,
key: 'Historical Normal',
classed: 'dashed'
},
{
area: true,
values: tsData.hi,
key: 'Historical Max',
color: '#0000ff'
},
{
area: true,
values: tsData.low,
key: 'Historical Min',
color: '#ffffff',
fillOpacity: 1
}
];
Which results in this image:
Note that the gridlines below the Historical Min line are hidden by the filled areas. This solution is a bit hacky and ugly. Is there a more direct way to do this?
I achieved a better solution by drawing an area using d3.
First I created an array (I called areaData) that merges tsData.hi and tsData.low. For each data point I push for eg:
{x: "The x value", y0:"The y value from tsData.hi", y1:"The y value from tsData.low"}
Then I defined the x and y scale based on the chart's scales:
var x = chart.xScale();
var y = chart.yScale();
Then I added an area definition as
var area = d3.svg.area()
.x(function (d) { return x(d.x); })
.y0(function (d) { return y(d.y0); })
.y1(function (d) { return y(d.y1); });
Next I drew the area using:
d3.select('.nv-linesWrap')
.append("path")
.datum(areaData)
.attr("class", "area")
.attr("d", area)
.style("fill", "#AEC7E8")
.style("opacity", .2);
This achieves a better looking solution. Because nvd3 updates the chart when the window is resized. I wrapped the drawing of the area in a function. So that I can call the function when the window is resized while removing the previously drawn area as follows:
var drawArea = function () {
d3.select(".area").remove();
d3.select('.nv-linesWrap')
.append("path")
.datum(areaData)
.attr("class", "forecastArea")
.attr("d", area)
.style("fill", "#AEC7E8")
.style("opacity", .2);
}
drawArea();
nv.utils.windowResize(resize);
function resize() {
chart.update();
drawArea();
}
I also disabled switching the series on and off using the legend as I wasn't handling that case:
chart.legend.updateState(false);
The result:
I am trying to draw a circular heat or ring-chart. There are several options it seems with d3js. The most popular appears to use the pie layout to make several donut rings Another option is to use a circular heat chart like this one -
Both of these however use filling segments as their way of depicting area size. I wanted however to use lines to depict events over time. With each line occurring within a particular ring.
To get this effect, I've adapted this radial weather chart - http://bl.ocks.org/susielu/b6bdb82045c2aa8225f5
This is my attempt so far:
http://blockbuilder.org/jalapic/12a3a23651f40283d489
It does not have labeling, but each ring (12 total) represents an individual subject. Each segment represents a sample of time (says months here but could be anything). The lines are drawn within each ring that they belong to. I have kept the same variable names as the weather example to enable comparisons between my stripped down code and the author's original code.
This is what it looks like:
My question is how might it be possible to mouseover each ring to make only that ring's contents (i.e. lines) remain visible, i.e. to hide the other rings - this would make viewing the chart easier.
Here is the code for how the rings are made up:
var mycircles = [110,100, 90, 80, 70, 60,50,40,30,20,10,0]
origin.selectAll('circle.axis-green')
.data(mycircles) //original circles
.enter()
.append('circle')
.attr('r', function(d) { return rScale(d)})
.style("fill", "#fff8ee")
.style("opacity", .05)
.attr('class', 'axis record')
.on("mouseover", function(d) {d3.select(this).style("fill", "red");})
.on("mouseout", function(d) {d3.select(this).style("fill", "#fff8ee");
});
As can be seen the rings are actually overlapping circles. Is there a way to achieve what I'm trying to do using the approach I'm taking, or would I have to go back to working something out with segments like in the heatchart or pie layouts?
Looking at your data and code, one method would be to assign a class to each line representing it's ring position. You can then use mouseover and mouseout events to toggle the opacity of those lines.
First, create a couple helper functions:
// which ring is currently highlighted
var curRing = null;
// show all rings
function unShowRing(){
d3.selectAll(".record")
.style("opacity", 1);
curRing = null;
}
// only show current ring
function showRing(ringId){
// all lines that are not in my ring, hide them
d3.selectAll(".record:not(.ring" + ringId + ")")
.style("opacity", 0);
curRing = ringId;
}
Set up the lines a little different:
...
.enter().append('line')
// assign a unique class to each ring's lines
.attr('class', function(d) {
return cl + " ring" + d.recLow/10;
})
// on mouseover only show my ring
.on("mouseover", function(d){
var ringId = d.recLow/10;
showRing(ringId);
})
// on mouseout show all rings
.on("mouseout", function(d){
unShowRing();
})
// this will prevent lines transitioning in from being shown
.style('opacity', function(d){
if (!curRing){
return 1;
} else {
var ringId = d.recLow/10;
return ringId === curRing ? 1 : 0;
}
})
Finally, you'll need to handle the ring "circle" mouseovers as well in case the user mouses over lines or rings:
origin.selectAll('circle.axis-green')
.data(mycircles) //original circles
...
.on("mouseover", function(d) {
d3.select(this).style("fill", "red");
var ringId = d/10;
showRing(ringId);
})
.on("mouseout", function(d) {
d3.select(this).style("fill", "#fff8ee");
unShowRing();
});
Here's the whole thing working.