following code adds symbols on multi series line chart.
I want to skip symbols for specific series among all. Can we conditionally skip a single series from being added in multi series line chart?
lineChart.selectAll("g.dot")
.data(d3Data)
.enter().append("g")
.attr("class", "dot")
.style("fill", "red")
.style("stroke", "red")
.selectAll("svg:path")
.data(function(d) { return d.data; })
.enter().append("svg:path")
.attr("transform",function(d){return "translate("+x(d.key)+","+y(d.value)+")";})
.attr("d", d3.svg.symbol().type(d.seriesSymbol).size(22));
If I set value in d.seriesSymbol as blank of any garbage value then d3 by default displays circle. I dont want even this circle to be displayed. I am writing d3.js code in nodejs.
Do we have "none" kind of keyword to skip symbol?
Related
I Need 10 different Colors in Pie chart Using the Library of pykcharts.
Is it possible Because As per the Documentation they Provide only one shade_color.
Go through this link http://pykcharts.com/tour/pie
#Tkingovr chart_color is for all charts but One dimensional. You can use shade_color for One dimensional charts https://github.com/pykih/PykCharts.js/wiki/Colors#shade-color
#KIRANJOSHI
var selector = "pieContainer", // selector of your chart
colors = ["red","blue","green","yellow","orange"];
setTimeout(function() {
d3.selectAll("#" + selector + "_svg path.pie")
.attr("fill",function(d, i) {
return colors[i];
});
},1000);
setTimeout is required since the chart may take time to render and there is no provision in the current version to run a piece of code on chart render complete.
According to the documentation you should be able to pass in values like this:
{
"chart_color": ["blue","green","Yellow"]
}
The chart also accepts any of the following:
Color Names (Eg: "red")
Hex values (Eg: "#B0171F")
RGB values (Eg: "rgb(176,23,31)" )
I'm stumped on this one, I need another set of eyes to help me see what I'm missing. I have a bl.ock up here:
http://bl.ocks.org/hepplerj/c419baa3abf7363cd2d5
As you'll see, a few of the rect elements aren't drawing along the x axis correctly. Any pointers on what I'm overlooking? Much appreciated!
There's just a minor issue with your code. First of all, here's a fiddle that's the same as your bl.ock: http://jsfiddle.net/gp2ex7fw/
View source and count the <g class="bar"> elements, and you'll see that there are only seven, whereas you have data for eight grains. millet/sorghum groats is missing altogether. This creates gaps in each bar, resulting in the bar not filling up the entire height.
This is because of the following part of your code:
d3.select("svg").selectAll("g")
.data(stackLayout(stackData))
.enter()
.append("g")
.attr("class", "bar")
When you do selectAll("g"), you're also selecting the first g element (used for transformation) that was attached to your svg element earlier.
The fix is very easy. Just change the above code to:
d3.select("svg").selectAll(".bar")
.data(stackLayout(stackData))
.enter()
.append("g")
.attr("class", "bar")
Now we're only selecting g elements with class="bar" and not missing any data. Here's a working fiddle: http://jsfiddle.net/gp2ex7fw/1/
I'm making a simple line chart with in-chart labels using d3.js.
When I draw the axes before the labels, the latter do not get added to the svg element, but they do if I draw them first:
In the second chart, the labels are not just hidden. They are not being appended to the DOM at all.
Here's the bl.ock. The only difference between both scripts is that before.js writes labels before axes, while after.js does it afterwards.
Why does this happen?
The problem is this line when adding the labels:
svg.selectAll('text')
If you have drawn the axes at this point. There will be text elements and the selection above will not be empty. Calling .data() on it causes D3 to match data elements to DOM elements in the selection. In this case, everything is matched and therefore the .enter() selection is empty and no new labels are added.
It works if you run this code first because there are no text elements, the selection is empty and no data is matched. To prevent this, you can for example identify the label text elements explicitly with a class:
svg.selectAll('text.label')
.data(dataset)
.enter()
.append('text')
.attr("class", "label")
.text(Math.floor)
.attr('class', 'data-label')
.attr('x', function (d, i) { return x(i); })
.attr('y', function (d, i) { return y(d + 1); });
With this code, it doesn't matter whether you run it before or after adding the axes.
I have been stuck on this problem for days.
So I have a dataset of objects of the following form:
dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}]
The following code would display the 4 metric names in a grid pattern (meshy, meshx are the coordinates points of the grid and meshsize is the size of the grid, so this is just putting the text in the middle of a grid square):
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d.metric;
})
.attr("y",function(d,i){
return meshy[i] + meshsize/2;
})
.attr("x", function(d,i){
return meshx[i] + meshsize/2;
})
.attr("font-size",25)
.attr("font-family","serif")
.attr("text-anchor","middle")
.attr("font-weight","bold");
Now I would like to put the value of the metric right underneath the metric name like so:
svg.append("text")
.data(dataset)
.text(function(d){
return (d.value);
})
.attr("y",function(d,i){
return meshy[i] + meshsize/2 + 20;
})
.attr("x", function(d,i){
return meshx[i] + meshsize/2 ;
})
.attr("font-size",25)
.attr("font-family","serif")
.attr("text-anchor","middle")
.attr("font-weight","bold");
But this only returns the value underneath the metric name for the FIRST metric, the other 3 value texts are not even in the DOM. I have tried multiple approaches including replacing .text with .html as described here:https://github.com/mbostock/d3/wiki/Selections#wiki-html with no success. I have also tried appending paragraph elements instead - this works but the p elements are positioned below the svg body in a list with no obvious way to move them into the right position. The code above is the closest I have come to getting what I need, but for some reason only the first value text shows up. However, I am open to any approach in d3 that gets the job done: 4 metric names with the values right underneath them
In your second block of code, you are only appending one text element, hence only one of them is appearing. What you need to do is to append the text similar to your first block, i.e. with the .enter() selection. For this, you have two choices. You can either save and reuse the .enter() selection, or assign different classes to the two kinds of text to be able to distinguish between them.
Option 1:
var texts = svg.selectAll("text")
.data(dataset)
.enter();
texts.append("text")
.text(function(d){
return d.metric;
})
// set position etc.
texts.append("text")
.text(function(d){
return d.value;
})
// set position etc.
Option 2:
svg.selectAll("text.title")
.data(dataset)
.enter()
.append("text")
.attr("class", "title")
.text(function(d){
return d.metric;
})
// set position etc.
svg.selectAll("text.value")
.data(dataset)
.enter()
.append("text")
.attr("class", "value")
.text(function(d){
return d.value;
})
// set position etc.
The first option is obviously shorter, but depending on what else you want to do, the second option may be preferable -- if you want to modify the text afterwards, it will be a lot easier if you can distinguish between the two kinds of text. You can also use the different classes to give different CSS styles.
I'm trying to build a donut chart. How can i add different colors that are specific to an arc. For example i want red color for status "one", blue for status "two" , green for status "three" and so on...
I tried the following,
var color = d3.scale.ordinal()
.domain(["one","two","three","four","five"])
.range(["#013ADF", "#ACFA58", "#DF3A01", "#6b486b", "#a05d56"]);
paths.enter().append("svg:path")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.attr("fill", function(d, i) {console.log(color(d.name)); return color(d.name); })
I was able to get the colors initially. But when any status count was reduced to 0 , the colors gets shuffled. And again when i increased the status count, i was not able to get the specific color back...
Please Help with some suggestions....
You'd better update the color every time not ONLY in enter().
paths.enter().append("svg:path")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
path.attr("fill", function(d, i) {console.log(color(d.name)); return color(d.name); })