Updating line graph - d3.js

I'm looking for the best way to update my line graph. The incoming data is not 'new', it's just switching between many different data sets. My issue is that .append('path') simply isn't working, and I'm not sure why. It may have to do with my grouping: I like to put margins around my graphs so axis and labels aren't clipped. To do this, my HTML looks like the following...
<svg w, h id='svg-container'>
<g translate(w - margin, h - margin) id='chart-container'>
<g id='x-axis'>
<g id='y-axis'>
In my code I would like to select chart-container and append a <path d='...' id='line'>. Later, when updating the graph, I would hope to be able to simply select('chart-container').select('path') and update that selection.
Initial setup of the chart:
var svgContainer = d3.select(element[0]).append('svg')
.attr({
width: width + margin.left + margin.right,
height: height + margin.top + margin.bottom
})
.classed('svg-container', true);
var chartContainer = svgContainer.append('g')
.classed('chart-container', true)
.attr('transform', "translate(" + margin.left + "," + margin.top + ")");
chartContainer.append('path')
.data(activeData)
.attr('d', lineFunc)
.attr('stroke', 'blue')
.attr('stroke-width',
.attr('fill', 'none');
Update the chart later on:
svgContainer = d3.select('#line-container').select('.svg-container')
.attr({
width: width + margin.left + margin.right,
height: height + margin.top + margin.bottom
});
chartContainer = svgContainer.select('.chart-container')
.attr('transform', "translate(" + margin.left + "," + margin.top + ")");
chartContainer.select('path')
.data(activeData)
.attr('d', lineFunc)
.attr('stroke', 'blue')
.attr('stroke-width',
.attr('fill', 'none');
Unfortunately this doesn't work, and I'm not sure why. The initial chartContainer.append('path') seem to be working (sometimes), and the chartContainer.select('path') doesn't actually return the correct item (othertimes). Might d3 be traversing my axis groups and returning one of their paths? Am I going about this the wrong way?

You don't show us your complete code, but from your description it sounds as if you may be selecting the wrong path. One way around this is to assign a special class to the path you want and select accordingly.
chartContainer.append("path")
.attr("class", "chart");
chartContainer.select("path.chart");
The other problem is that you can't really use .data() to update the data bound to the DOM element like you're using it. Use .datum() instead.
chartContainer.select('path')
.datum(activeData);

Related

D3 - SVG elements being positioned from body, not SVG container

I am trying to us d3 inside of rails app.
There are other elements that are not part of the visualization taking space at the top and left of the page.
My problem is when I do positioning (x, y) to any svg element, it seems to be doing it based on the body of the page, not the svg. Is this typical? Is there a way I can always position from the (0,0) position of an svg, the top left corner ?
I am selecting an element, appending an svg and g tag then a text I guess I was expecting because everything was being appended it would be placed with/positioned in it's parent.
Example:
var g = d3.select("#chart-area").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
g.append("text")
.attr("class", "x axis-label")
.attr("x", width / 2)
.attr("y", height + 75)
.attr("font-size", "20px")
.attr("text-anchor", "middle")
.text("Months")
The result of this is that the label will show up underneath the UI of the gem.
This is not the actual project, its a tutorial, but I am using basically the same code:
https://jsfiddle.net/r6jkht9v/1/
My solution was mostly based around adding some bootstrap tags.
<div class="container">
<div class="row">
d3
</div>
</div>
After adding this svg elements I appended stayed with in the svg.

Add brush on top of d3 barchart

I am trying to add a brush on top of a barchart in d3. Currently I am using barchart for my example:
https://bl.ocks.org/mbostock/1134768
This is the example of the brush that I want to implement: http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
I can only find examples where the bush is below the chart and not on the main chart itself. Can anyone explain to me how to put the brush on top of the barchart or point me in the direction of an example that I could follow?
In the Brush & Zoom example you are referring to, there are following lines:
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
...
svg.append("rect")
.attr("class", "zoom")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
These are specifying positions of the chart area, brush area and zoom area. You can just tweak margin and margin2 values which are specified at the beginning of the script, or explicitly set up a different transformation here.
You need to have margin.top > margin2.top, and tweak bottom margins too.

Removing single elements of svg in d3.js

I have the following code in d3.js
var svg = d3.select(".Canvas").append("svg").attr(
"width", width + margin.left + margin.right).attr("height",
height + margin.top + margin.bottom).append("g").attr(
"transform",
"translate(" + margin.left + "," + margin.top + ")");
svg.append("g").attr("class", "x axis").attr("transform",
"translate(0," + height + ")").call(xAxis);
svg.append("g").attr("class", "y axis").call(yAxisMajor).append("text")
.attr("transform", "rotate(-90)").attr("y", 6).attr("dy",
".71em").style("text-anchor", "end");
I tried the following to remove only the y-axis, not the whole svg:
d3.select(".Canvas").selectAll("svg").selectAll("g").select(".y axis").remove();
Why is the code not working?
Here is a little demo with a couple of simple ways to do it (see my comments in the fiddle).
d3.select("svg > g > #the_one_circle")
.transition().duration(1000)
.attr("r",1)
.remove();
Note how the svg and g elements are still there after removing the circle.
Because when you set class attribute as y axis , you actually set two classes. So in order to select and match both class names you need to call select with .y.axis. So that the result should be:
d3.select(".canvas").selectAll("svg").selectAll("g").select(".y.axis").remove();
at least worked for me, demo.

how to zoom svg semantic graph when the mouse is under svg instead of node

I'm working on collapsible tree graph zoom. Whenever i wanna zoom i have to keep mouse pointer on node(circle) then only i am able to do zoom in and zoom out. But it should be able to that when mouse is any where in graph.
zoom function call is following:
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1,8]).on("zoom",zoom));
I am following this example link for zoom in and zoom out : http://jsfiddle.net/6kEpp/37/
Any help would be much appreciated.
Just append rectangle to the SVG that's it.
svg.append('svg:rect')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('fill', 'white');

font size is not working in my d3.js code

i am writing d3.js for generating many charts and graphs.. but when there is no data i am just appending svg a text and writting "no data to display" and assigning some attributes like x y dy etc.. similarly font-size but except font size every thing is working .
why? here is my code
var svg = d3.select(selector).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
if (!data.IssueTrendsDAO.issueTrendList) {
svg.append("text")
.attr("font-size","34px")
.attr("y", 79)
.attr("x", 40)
.attr("dy", ".47em")
.style("text-anchor", "start")
.style("fill", "#004669")
.style("font-weight", "bold")
.text("No data to display");
}
I think you'll find it works if you assign font-size as a style rather than as an attribute.
.style("font-size", "34px")
(better yet, assign an id or class attribute and set all your styles in CSS)

Resources