I have two nvd3 pie charts in my page and when I try to position them with
the following code,only the first one is getting replaced. The second one seems to have no effect.
This is the code I used
d3.select(".nv-pieWrap")
.attr("transform", "translate(0,-35)");
This is taken in the first graph, but for the second pie chart,the positioning is not applied, when I checked with Firebug.
Please help me on this.
In order to select all pie charts on the page, you'll need to use d3.selectAll as follows
d3.selectAll(".nv-pieWrap")
.attr("transform", "translate(0,-35)");
According to d3 API reference:
A selection is an array of elements pulled from the current document.
...
...
After selecting elements, you apply operators to them to do stuff. These operators can get or set attributes, styles, properties, HTML and text content. Attribute values and such are specified as either constants or functions; the latter are evaluated for each element.
You can find more at https://github.com/mbostock/d3/wiki/Selections
Related
I want my legend to adjust itslef according to the amount of data that is coming in like highcharts . For example if I have only one legend I don't wanna legend to take the length as the div itself and I also have multiple pods .if there are a lot of legends I want it to have scrollbar instead now it's reducing the size of the chart itself.
Pls give your valuable inputs .
You can have the Legend rendered inside a defined Element referring to it using divId.
Then just make sure your legend element is setup to use scrollbars.
Please check the example here: https://codepen.io/team/amcharts/pen/dac1c66de18a50661c8195d4b792a30c
I am trying to understand and implement the D3 reusable chart pattern.
See sample implementation.
Here the updatableChart is called after selecting the id '#updatableChart'.
Question 1:
If I want to adjust the height parameter by calling as below, in subsequent code, it duplicates the chart.
d3.select('#updatableChart')
.call(updatableChart.height(450));
How should I use this pattern and update the height without affecting the original chart ?
Question 2:
Now if I need another chart, say, under div id '#updatableChart2', I can still call and get the chart using code below.
d3.select('#updatableChart2')
.call(updatableChart)`
But when I try to adjust the height by simply saying updatableChart.height(500); it affects only the second chart. How can I be specific in choosing the chart instance to work on ?
Thank you.
Answer 1:
The reason the chart is drawn again, is because I am calling the updatableChart.height(450) within a D3 selection. Instead it should have been called simply as updatableChart.height(450), to adjust the height.
Answer 2:
The problem was that the same chart object is attached into different div elements.
If another chart is needed under a different div, then the original barchart() should have been instantiated into another copy, say var updatableChart2 = barChart() and used further.
I created a grouped-stacked composite chart using dc.js.
I am wondering if I can add a filterHandler to a composite chart.
I want to filter on each stacks.
It seems that, there is no straight forward way to build a composite chart and hook the parent chart to the volumeChart that would filter all the individual child components at once via dc.js, as Gordon suggested. I came up with a solution for one of my dashboards which is not so modular but works fine & also keep in mind the downsides to this approach pointed out below.
For the above dashboard to work, I defined 3 barCharts and 3 lineCharts overlaid on top the barCharts and chaining them all together linearly to volumeChart.
Although this works fine with a fixed y-axis scale, lineChart fails to align with the barCharts when the I set elasticY(true) on all of them, since the lineChart components seem to pic its own yMax and when I pass the yMax value as window.value from barCharts to the lineChart via .on('renderlet'..., again I fail to read these values due the misalignment of individual chart render times. And of course when I overlay the lineCharts I intrinsically loose/block the interaction with the barCharts and use the line moving average tooltips to view bar data.
I have not tried this yet but found a better way to do the same from Scott Miller - https://stackoverflow.com/a/25188909/5743716
Hope it helps!
I am working on a dynamic scatter plot using D3. (Current draft)
I would like to include a form at the bottom of the page that hides or grays out some of the circles depending on the form.
The form will have checkboxes and sliders. This question only asks about sliders. At the moment I'm stuck at how to make D3 elements respond to a form
Following this tutorial I made a slider that calls an update function when the user interacts with the slider. This SO answer gives the code for changing the color fill of a data point.
The console.log statement inside the update function suggests that I am not selecting the proper D3 element.
How do I access/link the proper D3 elements?
You should filter your data according to form inputs, and then notify d3.js with changed data. Put something like
d3.select('#chart svg')
.datum(filterDataset(dataset, nRadius))
.transition().duration(1000)
.call(chart);
in your update function (example in pastebin)
Graying out is much the same, except you only change attributes in your data and making d3 colorize items according your attributes.
So, in nvd3 charts, clicking on a legend entry basically filters that out of the chart window (for instance in the case of area charts). I want to invert this functionality..i.e. show the particular chart when its corresponding legend is shown and hide all the others...is there a way to do it?
It is similar to what happens when user hits the chart itself (i.e. only the one that is clicked is expanded and rest of the streams hide).
I am referring to this example: http://nvd3.org/ghpages/stackedArea.html
There's a radioButtonMode that should do exactly what you want. You should be able to set this on the chart, i.e.
chart.radioButtonMode(true);