I have multiple nvd3 pie charts in the same page. Now when I try to position them,individually using this code below
d3.select(".nv-pieWrap")
.attr("transform", "translate(0,-35)");
Only the first graph in the page gets repositioned. It is said in the nvd3 support document that the select keyword if used in multiple functions,only selects the first element in the page.
Now when I replace "select" with "selectAll",every graph is re-positioned.
I want to position them separately ie the "translate" coordinates would be different in different cases. How would I accomplish that?. Can anyone help?
d3.selectAll(".nv-pieWrap")
.attr("transform", "translate(0,-35)");
I've got two solutions of the problem.
One solution is you can specify 'transform' attribute not as a constant "translate(0,-35)" but a function instead. And within the function decide which coordinates you need based on the chart's index:
d3.selectAll(".nv-pieWrap")
.attr("transform", function(d, i) {
// i is a chart index
if (i === 0) {
return 'translate(0,-35)';
} else {
return 'translate(100,-35)';
}
});
Another solution is to wrap your code
d3.select(".nv-pieWrap")
.attr("transform", "translate(0,-35)");
into a transforming function which takes a node and transform as a parameter, e.g.
var transform = function(chart, transform) {
return
d3.select(chart)
.attr("transform", transform);
}
draw("#pieChart1", "translate(0,-35)");
draw("#pieChart2", "translate(100,-35)");
Related
I have a simple visual of many rects, over 100 I'd say. For aesthetic purposes I want to create a high light effect on mouse click. I also wanted to make this effect somewhat intuitive by removing that effect once the user clicks on a new rect. However I couldn't get this to work without resorting to a d3.selectAll() call, so I'm thinking this approach might not be ideal if this project gets any bigger. Here is the code:
.on('click.highlight', function() {
//set any previously highlighted rects back to normal color/brightness
d3.selectAll('.highlight').transition().duration(250)
.style('fill', function(d) { return d3.rgb(d.color)})
d3.select(this).classed('highlight',true);
//now it's safe to assign the current highlighted rect a brighter hue... i think
d3.select(this).transition().duration(250)
.style('fill', function(d) { return d3.rgb(d.color).brighter(.5)})
})
Though this code does what I wanted it to do, but presumably there could only ever be 1 other highlight rect to worry about at any give time. So again, I'm not sure that using d3.selectAll() is warranted here.
So anyway, is there a more efficient way? I'd like to keep it all within one .on('click') function if possible.
If you are looking to avoid use of .selectAll, you could create a selection of one rect that contains the last clicked rectangle. Each time you click on a rectangle:
unhighlight the previously selected highlighted rect
update that selection to reflect the most recently clicked rectangle
highlight the newly selected rect
I use the variable highlightedRect to hold the selection that will allow the above workflow:
var svg = d3.select("body").append("svg")
.attr("width",600)
.attr("height",400);
var highlightedRect = d3.select(null);
var rects = svg.selectAll("rect")
.data(d3.range(1600))
.enter()
.append("rect")
.attr("y",function(d) { return Math.floor(d/50)*12; })
.attr("x",function(d) { return d%50 * 12 })
.attr("width",11)
.attr("height",11)
.attr("stroke","white")
.on("click",function(d) {
// Recolor the last clicked rect.
highlightedRect.attr("fill","black");
// Color the new one:
highlightedRect = d3.select(this);
highlightedRect.attr("fill","steelblue");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
I want to plot a d3 bubble chart. By taking the example from d3
This link
i tried to get the bubble chart for my local file i.e myfile.geojson. The code which i tried is in the plunker link. I want to plot a bubble chart based on the value "Profit". Tried everything in the google and youtube but i didnt get the solution to my problem.
Plunker link
I am new to d3. If i do any mistakes in the code please suggest me to make them correct. Thanks In advance.
Your data is way different from flare.json so copying the recurse code will not make your data. Your dataset is very simple it does not need a recursion to flatten the dataset.
function classes(root) {
var classes = [];
function recurse(profit, node) {
if (node.profit) node.profit.forEach(function(child) { recurse(node.profit, child); });
else classes.push({packageName: type, className: node.profit, value: node.profit});
}
recurse(null, root);
return {features: classes};
}
This should have been:
function classes(root) {
var classes = root.features.map(function(f, i) {
//here i is the index
return {
value: f.properties.profit,
className: "Hello" + i,////just giving some dummy values
packageName: i//just giving some dummy values
}
});
return classes;
}
Now pass this data to the bubble layout like this:
var node = svg.selectAll(".node")
.data(bubble.nodes({
children: classes(root)
}).filter(function(d) {
return !d.children;
}))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
EDIT
The bubble chart is based on the profit value:
The radius of the circle depends on the value you give here inside the classes function.
return {
value: f.properties.profit,
className: "Hello" + i,////just giving some dummy values
packageName: i//just giving some dummy values
}
Thus more the value or f.properties.profit the bigger will be the radius.
The radius will be relative to the diameter you setting here:
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
Read Domain range in d3 https://www.dashingd3js.com/d3js-scales
In place of className and packageName what should i give to get the bubble chart based on the profit value.
This i don't know what to answer I think your concept is not clear so is the naive question.
If you see the code packageName defines the color
.style("fill", function(d) {
return color(d.packageName);
});
and className defines the text to be displayed in the bubble
.text(function(d) {
return d.className;
});
Kindly see the code in fiddle its very simple to understand.
Working code here.
I've recently passed from d3.v2 to d3.v3, and am trying to understand the differences in the transition mechanisms.
In the code underneath, I'm trying to make a bar graph that, when drawn, has bars that increase in height via a transition. This code works without issue in d3.v2, but in v3, the transition seems to happen "instantly" (the height is immediately set to the end value).
graph.enter()//for each bucket
.append('g')
.attr('transform',function(d,i){ return 'translate('+(xBand(i))+')';})
.attr('width',xBand.rangeBand())
.each(function(data,index){//here we are working on the selection for a single bucket
var $this=d3.select(this); //this refers to the group selection
var currentY=0;
var rects=$this.selectAll('rect')
.data(data.values);
rects.enter()
.insert('rect')
.attr('group-id',me.groupId)
.attr('y',Hats.accessor('y'))
.attr('width',xBand.rangeBand())
.attr('fill',(function(elt){ return me.colors(me.groupId(elt));}));
rects.transition()
.duration(750)
.attr('height',(function(elt){
var h=_.compose(heightScale,me.values)(elt);
d3.select(this).attr('y',currentY);
currentY+=h;
return h;
}));
});
Try setting a starting height in your enter selection:
rects.enter()
.insert('rect')
.attr('group-id',me.groupId)
.attr('y',Hats.accessor('y'))
.attr('width',xBand.rangeBand())
.attr('fill',(function(elt){ return me.colors(me.groupId(elt));}))
.attr('height', 0);
rects.transition()
.duration(750)
.attr('height',(function(elt){
var h=_.compose(heightScale,me.values)(elt);
d3.select(this).attr('y',currentY);
currentY+=h;
return h;
}));
I have prepared a bubble chart , which you can zoom into using the brush in ther grey area below the scale.Here is the fiddle. The code below updates the graph . It is updating the ruler but not graph. Can any one point out why?
function brushmove(){
x_axis.domain(brush.empty() ? x_axis.domain() : brush.extent());
svg.select('.ruler').call(x_axis_ruler);
blue_circle.selectAll('circle').data(dataset)
.attr('cx', function (d, i) {
return x_axis(d.waiting_to_be_processed_time);
})
}
I dont know why but you should not be using the variable blue_circle to update the width .
Instead you should be replacing the code with this:
function brushmove(){
x_axis.domain(brush.empty() ? x_axis.domain() : brush.extent());
svg.select('.ruler').call(x_axis_ruler);
d3.select('.processing_circles').selectAll('circle').data(dataset).attr('cx', function (d, i) {
return x_axis(d.waiting_to_be_processed_time);})
}
I have left the reason for a more experienced user to checkout.
I could really use some guidance setting up a transition on my multiseries line chart. As an example of what I need, I've started with this great multiseries line chart: http://bl.ocks.org/mbostock/3884955. To that code, I've added an update() function that's called once using setInterval(). I've also created a new data set called data2.csv which is similar to data.tsv but has different values.
The update function should change the data that the line chart is displaying. Forget about making a nice smooth transition, I can't even get the data to update in the chart view. When I try using the update function, it looks like the new data is loaded properly into the javascript variables, but the lines on the chart don't change at all.
I've seen variations on this question asked a few times but haven't found an answer yet. Can anyone help me figure out how to transition this multi-series line chart to a new dataset (also multiseries)?
function update() {
d3.csv("data2.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
// format the date
data.forEach(function(d) {
d.date = parseDate(d.date);
});
// rearrange the data, same as in the original example code
var cities2 = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
// update the .city g's to the new dataset
var city2 = svg.selectAll(".city")
.data(cities2);
// redraw the lines with the new data???
city2.selectAll("path")
.attr("d", function(d) { return line(d.values); });
clearInterval(transitionInterval);
});
}
UPDATE: NikhilS's answer contains the key to the solution in the comment trail.
You should make sure you are following the enter + update process as outlined by Mike Bostock in his stuff on the General Update Pattern. It looks like you haven't invoked any kind of d3 transition. You also haven't specified an enter or exit for the update function, which will cause problems if you have new data coming in and/or old data going out. Try changing this:
var city2 = svg.selectAll(".city")
.data(cities2);
city2.selectAll("path")
.attr("d", function(d) { return line(d.values); });
to the following:
var city2 = svg.selectAll('.city')
.data(cities2);
var cityGroups = city2.enter().append('g')
.attr('class', 'city');
cityGroups.append('path')
.attr('class', 'line');
d3.transition().selectAll('.line')
.attr('d', function(d) { return line(d.values); });
city2.exit().remove();
I made a basic data re-join and update demo a while back, which you can view here.
use d3 Transition, you can make some sort of animation.
If you want to select a sub-interval of the data to plot the graph, no need manipulation on the data, just use a d3 brush and clip the graph
For a multi-series line graph with most of the line graph elements, you could refer to this example: http://mpf.vis.ywng.cloudbees.net/