d3.js:Add color to axes dynamically - javascript

I am trying to create a line chart in d3.js.The color of the axes for this chart would be available only at runtime and can vary in a vast set of colors.It is possible to set the colors for the axes using css classes like this.
But since the range of colors that my chart can take is vast and only available at runtime, its not feasible to use this solution.Using call(yAxis).style("stroke",userColor) sets the color for the font use on axes labels and ticks but not the color of axis itself.
Is it possible to set the color of axis in d3.js axis dynamically using javascript?

I think the what you might want is something like the following:
d3.selectAll('.axis path')
.style("stroke", userColor)
.style("fill", userColor)
In this case, .axis path should be some identifying css on your axis lines (possibly put in with d3 as well in your yAxis function). You probably only need one of fill and stroke, try it out to see what works for you. This should operate on the actual axis line, rather than the text element

Related

d3:Adding Axis like a Box

I have d3 graph with xaxis and Y axis.I want to add axis to the top and right to make it look like a box.
Something like This.
You could go through this article for adding multiple axes. You should create new axis generators and give the orient as 'right' and top and call them finally.
http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html
EDIT:
I have made a simple line chart with your requirements. Have a look at https://jsfiddle.net/j0kaLf59/
Also as mentioned in the comments, you could just add two line elements. Have a look at this fiddle https://jsfiddle.net/a6o2hkfq/
Reference:
Create a D3 axis without tick labels
http://www.tutorialsteacher.com/d3js/create-svg-elements-in-d3js

Javascript / Adjusting colors

We are using this chart. I see there is no property available to customize the colors of the pie chart.
Is there a way to customize the colors ?
Also how can we enable legend for this (if we could display legend in the bottom of the graph, it could be great. i.e like this )? and display only percentage on the graph?
To make the graph exploded, i see we need to use ["pulled": true] in the dataProvider. Instead of providing it inside the dataProvider, is there a way to provide somewhere outside ?
There are two ways to customize colors
1) Use the colorField and define the colors directly for individual slices.
2) Set your own theme by modifying the colors array or create your own theme.
Legends are enabled by setting an empty legend object in the chart config. You can find further configuration properties in the documentation. You can even change the value label to use percentages by modifying the valueText property. There's also an example of a pie chart with the legend set up and a completely custom legend.
If you want to change the pie slices labels, change the labelText.
As for your last question, no - it's using pulledField to specify which slices are pulled out in your data. There isn't a setting to explode the entire chart without it.

D3 sunburst sequence colors and sunburst arc colors not matching

I am working with a zoomable sunburst in D3 that also has some breadcrumbs. First time working with D3 so I don't know all of the intricacies yet, but I am having trouble getting the colors of the arcs in the sunburst and the breadcrumbs in the sequence to match up. It only ever happens on the leaf nodes too which is weird. I can click on the inner circle and the breadcrumb shows up with the same color, and so on until I click on a leaf node.
Originally I set the color like this var colors = d3.scale.category10(); and the in the chart options like color: colors, When trying to set the colors for the polygon for the bread crumb I thought it'd be as simple as this which I had seen from a few examples,
entering.append("svg:polygon")
.attr("points", breadcrumbPoints)
.style("fill", function(d) {
return colors(d.name);
});
But this results in the explanation above. So to clarify in the picture below, either the outer arc on the sunburst should be pink, or the lowest bread crumb should be red. (I'm not sure which is correct, probably the former):
I have a working plunker I am almost done with, but can't get this part. Also part two kind of, but is it possible to set the color of individual arcs based on a certain value?
EDIT Okay well after looking at some more examples, it appears the red on red is okay in the picture for example. So I guess the solution I am looking for is to correct the behavior of the breadcrumbs.

nvd3 - can't showXAxis(false) if xAxis is visible

I'm trying to make a toggleable axis using nvd3s charts, specifically the line chart example. After running this example, opening the console, and typing chart.setXAxis(false) the x axis does not hide. Is there some documentation or some reason why this isn't working? It doesn't seem to work for any boolean either.. once it's true, it's not changeable to false.
setXAxis just tells the chart function whether or not to draw the axis when it draws the chart, it doesn't do anything to the existing axis. You'd be better off just selecting the axis directly and changing its visibility style.
Given the class names that NVD3 uses for it's axes, to hide the x-axis you would use:
d3.select("g.nv-axis.nv-x").style("visibility", "hidden")
That hides the axis, but doesn't delete it, so you can easily re-show it again (without updating the chart) with the same select statement but visibility style visible.

D3 ColorBrewer Coloring on Dynamic Scales

I'm using dc.js which sits on top of D3. Problem is all my charts have the same color bars like:
Its not easy to set the domain for different colors because none of my charts are static and the values on x/y axis could always be different. How could I just tell the chart to dynamically change the colors for each group? The example above code looks like:
var chart = dc.barChart(elm);
chart.barPadding(0.1)
chart.outerPadding(0.05)
chart.brushOn(false)
chart.x(d3.scale.ordinal());
chart.xUnits(dc.units.ordinal);
chart.elasticY(true);
chart.width(250).height(250)
chart.render();
I've tried adding something like:
chart.range(colorbrewer.RdBu[9]);
but then all the charts turn the same color too.
Thanks!
I believe you want something like:
chart.colors(d3.scale.category20b());
to assign a color to each bar. If you want the color that's selected to be based of the value of the bar's data:
chart.colorAccessor(function(d, i){return i;})
These methods and more are documented here: https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#color-mixin

Categories

Resources