When using d3 or nvd3, I'm able to change data to the chart using something like the following:
d3.select('#test1 svg')
.datum(someDataArr)
.call(chart);
Pushing an item onto the end of the someDataArr works as expected - a new item appears in the graph. However, if I shift the first item off and push a new item to the end, d3 (understandably) transitions each data point according to its index.
In the case of a scatterplot, for example, this is undesirable. I would prefer to remove the first item of the array but keep the plot points associated with their prior array index position.
Does anyone know how to keep the association between array[index] and chart points while also removing items from the beginning of the array?
Thanks in advance for your time.
Related
Is it possible to align the data points and outliers of box plot in one straight line like in center of box plot?
Additionally, can I color the data points?
The current and the desired screen shot are attached with it.
You can use
.dataWidthPortion(0)
to not spread the points out at all. Documentation.
General advice on changing the color or style of anything, if there is no accessor for it:
Look for the chart in the chart selectors wiki, or if it's not there, inspect the item you want to change in the developer tools and find out what SVG tag and CSS class the item has. In this case, it's circle.data
Add a pretransition handler which selects the items you want, and changes them:
var cc = d3.scaleOrdinal().range(d3.schemeDark2);
bp02.on('pretransition', chart => {
chart.selectAll('circle.data').attr('fill', function(d) {
const boxDatum = d3.select(this.parentNode).datum();
return cc(boxDatum.value[d]);
})
});
In this case, we're creating an ordinal scale to map the available data to the colors in a color scheme.
The interesting question is here is what data to bind to the color of the dots, and how to get that data.
A box plot's data consists of an array of key/value pairs where each value is a Y value. When the box plot draws it will bind each circle.dot element to the index of the data in the array.
So we need to get the array that is bound to the box. Luckily d3.select(this.parentNode).datum() will give us the key/value pair for the box.
For this example, we are encoding the color based on the Y value, which we get by looking inside boxDatum.value. You don't specify how you want the dots colored but this shows the data that is available.
Here is the original example code :
http://canvasjs.com/html5-javascript-dynamic-chart/
I need to update the value without setInterval(), I mean whenever the yAxis got a value somewhere, then it will plot automatically without time delay. One more thing, I dont’t want to shift the graph while the value reach datalength, when it reach the maximum datalength, clear all the old plotted data, go back to 0 point and plot again.
Thank you for your support !
canvasjs
Gia Huy,
You can remove dps.shift from the example to avoid shifting. Check this example.
And you can remove setInterval to avoid update of charge based on time-basis and you can manually push y-value to dataPoints and render chart whenever you get y-value.
setInterval(function(){updateChart()}, updateInterval);
Remove setInterval and push y-Value to dataPoints when you encounter it.
dps.push({y: yValue});
chart.render();
and render the chart.
I'm using Segment Plot to show multiple lines on the chart. How can I make these lines have arrows on their ends?
You can do this with some SVG + DOM hacking. You can define a "marker element" that can be placed at the beginning, middle or end of a line (see http://tutorials.jenkov.com/svg/marker-element.html for details on markers).
This means manipulating the SVG generated by Plottable. To get the underlying DOM elements, you need to get hold of the d3 "selection" representing each line.
Add a marker definition to the <svg> element where you are rendering the plot. I am pretty sure plottable won't overwrite entities already inside, but if it does you can always add it after rendering the plot.
Use Segment#entities to get all "PlotEntity" objects from the plot (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities).
Use the PlotEntity#selection property (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) to get the set of DOM elements representing each segment.
The "Selection" interface is just a d3 selection (https://github.com/mbostock/d3/wiki/Selections). You can then add the appropriate "marker-end" attribute to each element, which should give you the arrow heads you want.
On the off-chance these lines are vertical, I have a super easy hack. Use .symbol() to create a scatter plot where the points are either up or down arrows, and place them at the ends of the segments.
Otherwise, you may have to draw the arrows yourself. You can get the pixel locations of the ends of the segments like this:
locX = xScale.invert(endpointXValue)
locY = yScale.invert(endpointYValue)
And then you could append an arrow shape to the foreground (see the crosshair container in this example)
I'm trying to get a stacked bar chart to animate correctly as bars come and go. There's probably a good example of this somewhere (I'll ask as a separate question: How to correctly transition stacked bars in d3.js), but the examples I'm finding don't show transitions with individual stack elements exiting and entering.
My idea is to make a tween function that sets the y of each bar to the top of the of the bar beneath it. I want to make sure that as bars are exiting, they drag down the bars above them, and as they're entering, they push up the bars above them. And I don't want any gaps or overlaps midway through the transition.
But to get this to work, I would ideally have a list of all the bars--exiting, entering, existing--in order, and I would be able to tell which category each bar belonged to. So, I could kludge something together, assembling a single array from rects, rects.enter(), and rects.exit() (after something like
rects = d3.selectAll('g.barGroups').selectAll('rects').data(newData)
.)
But there's got to be a better way.
I'm working on a d3.js cluster diagram for a short time.
It's able to add new elements to clusters and move those elements across clusters.
I have added labels to elements but I didn't realize, how to make those labels move with the elements, if it is a new element.
My source is here: http://bl.ocks.org/heal25/9888263
If you add a new element, it's label doesn't works.
Can someone help me out?
Thank you!
I found a bug, that causes not to move a text with the element. In line 183. it must be
label = svg.selectAll("text.node")
and not
var label = svg.selectAll("text.node")