.width(400)
.height(200)
.externalLabels(20)
.externalRadiusPadding(5)
.drawPaths(true)
.dimension(genderDimension)
This is my code but drawPaths is not working. I don't want to use 2.0 beta.
Related
I have create a stacked bar chart having zoom & brush features with range selector sub-chart using dc.js.
There is tool-tip on the top chart which shows on mouse hover using d3-tip. After doing brush or zooming the tool-tips mostly gets stuck & does not get hide.
I am adding tool-tip using below code.
.on("pretransition",(c)=> {
this.addTooltip();//calling tool-tip method
})
And using below logic to show & hide the tool-tip on different events
this.mainChart.selectAll('rect').call(tip)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.on('wheel',tip.hide)
.on('mousezoomin.zoom',tip.hide)
.on('mousezoomout.zoom',tip.hide)
.on('mousewheel.zoom', tip.hide)
.on('mouseup', tip.hide)
.on('mousewheel', tip.hide)
.on('mousezoomout', tip.hide)
.on('mousezoomin', tip.hide)
.on('mousemove', (d) => { //...});
Let me know how to solve tool-tip stuck issue after zooming or brushing of chart.
Thanks in advance.
I'm trying to create a brush in the React app. So I imported brushX function from the d3-brush module and do the following:
import {brushX} from 'd3-brush';
let brush = brushX()
.x(this.x)
.extent([initWindow.start, initWindow.end])
.on("brush", this.display);
I got the error - .x() is not a function.
So how I can set scale to the brash?
Following part of the code works fine in non React app (d3js was downloaded from the mdn):
var brush = d3.svg.brush()
.x(x)
.extent([initWindow.start, initWindow.end])
.on("brush", display);
I've got a pie chart with the following for coloring the slices.
.colorAccessor(function (d) {
return d.value.count;
})
.colors(colorbrewer.YlGn[9])
.colorDomain([0, grpXtents[1]])
I am calculating the grpXtents using d3.extent
This works fine. How do I recalculate the extents for my color domain when I click on filter on other charts in the group?
Thanks!
You may not need to calculate it yourself. Please try this:
chart.on('preRedraw', function() {
chart.calculateColorDomain();
});
https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.colorMixin+calculateColorDomain
It should probably be an option on the colorMixin rather than requiring this hook.
I have two barCharts exactly equivalent except for the .brushOn option :
pnlPerDaybarChart
.height(300)
.width(700)
.dimension(dims.date)
.group(groups.date.pnlSum)
.valueAccessor(function(d) {
return Math.abs(d.value);
})
.renderTitle(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.days)
.colors(colorChoice)
.colorAccessor(colorAccessorPosNeg)
.brushOn(false)
.elasticY(true)
.margins({left: 70 ,top: 10, bottom: 30, right: 50})
.centerBar(true);
pnlPerDaybarChartBrush
.height(100)
.width(700)
.dimension(dims.date)
.group(groups.date.pnlSum)
.valueAccessor(function(d) {
return Math.abs(d.value);
})
.renderTitle(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.days)
.colors(colorChoice)
.colorAccessor(colorAccessorPosNeg)
.brushOn(true)
.elasticY(true)
.margins({left: 70 ,top: 10, bottom: 30, right: 50})
.centerBar(true);
They render the way I expect but when I use the brush on pnlPerDaybarChartBrush, dc.js doesn't update the other one.
Also, clicking on a bar in pnlPerDaybarChart doesn't modify pnlPerDaybarChartBrush rendering (or any of the other charts on the webpage).
Is this the expected behaviour ?
What I was expecting is :
when I click on a single day in the chart without brush it
automatically renders all charts with data for that specific day.
when I use the brush it also renders the filtered chart without brush
Here is the jsFiddle
It doesn't look like dc.js bar charts support click-to-filter by default. The brush function is expected to be the way you filter a bar or line chart (but as you've discovered, it has its own complications).
If your data is too dense to filter it precisely with the brush, one option would be to allow the user to zoom in on the range chart with mouse or touch events:
http://jsfiddle.net/r4YBS/4/
The only change is adding
.mouseZoomable(true);
at the end of the definition of the brushable bar chart.
Alternately you could implement a custom click listener, which then calls the .filter() method directly.
Fiddle for your requirement.
You are of course right.
.rangeChart is the property you'd need to use it.
Hope it helps.
I am able to show animations for bar charts and line charts.
Using:
animate: true,
animateReplot: true
But the animations doesn't seem to work for donut charts.
Can anyone explain me why?
Any help would be appreciated.
Thanks in advance.
In my knowledge currently jqplot not support Pie and donut chart animation.It would be nice if jqplot support Pie and donut animation.
We can Change the theme of Donut chart using JqPlot by seriesStyles property
seriesStyles: {
seriesColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
highlightColors: ['lightpink', 'lightsalmon', 'lightyellow', 'lightgreen', 'lightblue', 'mediumslateblue']
}
EXAMPLE from Stack overflow