I am trying to create a D3 differencing chart similar to this http://bl.ocks.org/mbostock/3894205
I have taken much of the D3 and CSS3 code verbatim from the example and got the relevant lines and colour areas to be drawn when the user checks on a particular checkbox. However, my coding problem lies in that the areas above and below the splitting line are highlighted using the same colour, not the differencing colours defined in the CSS code.
The relevant CSS is below:
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
/* display: none;*/
display: inline;
}
.area.above {
fill: rgb(252,141,89);
opacity:0.5;
}
.area.below {
fill: rgb(145,207,96);
opacity:0.5;
}
.line {
fill: none;
stroke: #000;
stroke-width: 1px;
}
With the relevant D3 code taken and adapted for use from the example above is here:
dvc.line = d3.svg.area()
.interpolate("basis")
.x(function(d) { return main_x0(d.date); })
.y(function(d) { return dvc.y(d[prelimLineArray]); });
dvc.area = d3.svg.area()
.interpolate("basis")
.x(function(d) {return main_x0(d.date)})
.y1(function(d) { return dvc.y(d[prelimLineArray]); });
dvc.focus.datum(dvc.data);
dvc.focus.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("stroke-width", "1px")
.attr("d", dvc.area.y0(dvc.height));
dvc.focus.append("clipPath")
.attr("id", "clip-above")
.attr("stroke-width", "1px")
.append("path")
.attr("d", dvc.area.y0(0));
dvc.focus.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", dvc.area.y0(function(d) {
return dvc.y(d[selectedLineArray]);
}));
dvc.focus.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("stroke-width", "1px")
.attr("d", dvc.area);
Can any help me and spot any errors in this code that would force only one CSS highlight colour to be used for both positive and negative graphed areas?
Thanks
Related
The Google Visualization Chart is filled with a color if the fill css property is set, e.g.
* {
fill: black;
}
Is there a way to unset the CSS fill property so that it uses the original colors? The goal is not to modify the Chart component is any way, the fill is unrelated to the chart (can be used to change other SVGs) but it affects the chart.
This does not work:
#chart_div * {
fill: unset;
}
See this fiddle: https://jsfiddle.net/g37fjyLx/1/
I realize that setting the fill for all elements * is probably not a good idea, but I'd still like to know if there is a way to reset it.
you need to use backgroundColor.fill. Please refer this https://developers.google.com/chart/interactive/docs/gallery/ganttchart#configuration-options
var options = {
height: 275,
backgroundColor: { fill: "#333" }
};
use this for your color:
var options = {
height: 275,
gantt: {
criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
arrow: {
angle: 100,
width: 5,
color: 'blue',
radius: 0
}
}
};
I tried editing the pie slice colors but it is filling in the label line also. How to avoid this issue?
https://codepen.io/jenfloods/pen/WNRELrP
Also, how to apply the stroke color outside? I've gone to the Highcharts documentation and it is not clear with This type of pie chart.
https://www.highcharts.com/demo/styled-mode-pie (default colors shown)
The connectors also have highcharts-color-x class and because of the fact that you redefine the color classes, they inherit styles from the other. As a solution add fill: none style for highcharts-data-label-connector class.
.highcharts-color-0 { fill: #e5ebed; stroke:#000000; }
.highcharts-color-1 { fill: #b2c3cb; stroke:#000000; }
.highcharts-color-2 { fill: #ccd7dc; stroke:#000000; }
.highcharts-color-3 { fill: #99afb9; stroke:#000000; }
.highcharts-color-4 { fill: #7f9ba8; stroke:#000000; }
.highcharts-color-5 { fill: #668797; stroke:#000000; }
.highcharts-color-6 { fill: #4c7385; stroke:#000000; }
.highcharts-color-7 { fill: #325f74; stroke:#000000; }
.highcharts-data-label-connector {
fill: none;
}
Live demo: http://jsfiddle.net/BlackLabel/ng62q9ej/
I have been staring at this for a long time now and can't see what's wrong...
I am drawing a line graph using d3 and want to keep the styling in a separate CSS file.
Line section:
var line = d3.svg.line()
.interpolate("monotone")
.x(function(d,i) { return xScale(graph_d.TimeStamp[i]) + 0.5; })
.y(function(d) { return yScale(d) });
//Average line
chart.select("#chartarea")
.selectAll(".avgline")
.data(graph_d.Data)
.enter()
.append('path')
.attr("class", "avgline")
.attr('d', function(d) { return line(graph_d.Data); });
CSS:
.avgline
{
fill: none;
stroke-width: 2px;
stroke: "grey";
}
This code does not render any line. Other parts of the CSS file are read and are working.
When putting the style into the line section it works:
//Average line
chart.select("#chartarea")
.selectAll(".avgline")
.data(graph_d.Data)
.enter()
.append('path')
.attr("class", "avgline")
.attr('d', function(d) { return line(graph_d.Data); })
.attr('fill', 'none')
.attr('stroke-width', '1px')
.attr('stroke', 'grey');
Can you please help me?
Colours in CSS are not written in quotes so you want
.avgline
{
fill: none;
stroke-width: 2px;
stroke: grey;
}
Here is a Plunker sketch of my problem.
The relevant code, containing the Polymer template and its invocation:
<link rel="import"
href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">
<dom-module id="polymer-d3-component">
<template>
<style>
#monthChart .line {
stroke: rgb(247, 150, 29);
stroke-width: 2;
fill: none;
}
#monthChart .axis {
shape-rendering: crispEdges;
}
#monthChart .x.axis line {
stroke: rgba(88, 89, 93, .12);
}
#monthChart .x.axis .minor {
stroke-opacity: .5;
}
#monthChart .x.axis path {
display: none;
}
#monthChart .y.axis line, .y.axis path {
fill: none;
stroke: rgba(88, 89, 93, .5);
}
#monthChart .axis path,
#monthChart .axis line {
fill: none;
stroke: rgba(88, 89, 93, .3);
shape-rendering: crispEdges;
}
#monthChart .axis text {
font: 10px sans-serif;
fill: rgba(88, 89, 93, .5);
}
</style>
<div id="monthChart"></div>
</template>
<script>
Polymer({
is: "polymer-d3-component",
ready: function() {
var m = [20, 20, 20, 20];
var w = 850 - m[1] - m[3];
var h = 400 - m[0] - m[2];
var data=[24509, 19466, 18004, 18381, 17312, 19926, 24761, 24815, 24333, 29117, 24527, 17478];
function formatCurrency (d) {
return "$" + d;
}
var xLabels = d3.time.scale().domain([new Date(2013, 0, 1), new Date(2013, 11, 31)]).range([0, w]);
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);
var line = d3.svg.line()
.x(function(d, i) {
return x(i);
})
.y(function(d) {
return y(d);
})
var graph = d3.select(this.$.monthChart).append("svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("g")
.attr("transform", "translate(" + 120 + "," + m[0] + ")");
var xAxis = d3.svg.axis().scale(xLabels).ticks(d3.time.months).tickFormat(d3.time.format("%B")).tickSize(-h).tickSubdivide(true);
graph.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
var yAxisLeft = d3.svg.axis().scale(y).ticks(7).tickFormat(formatCurrency).orient("left");
graph.append("g")
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
.call(yAxisLeft);
graph.append("path")
.attr("d", line(data))
.attr('class', 'line');
}
})
</script>
</dom-module>
The SVG is wrong but also the styles are not being applied, as can be seen by the shapes being all black and many are not drawn correctly. If I take the SVG code and manually put it directly in the Polymer component, it works fine.
What might be going on?
Polymer applies styles when the template is rendered to a DOM, so DOM nodes appended by libraries later (e.g. in ready) are not styled. This is described in the manual here.
The fix is to call—
this.scopeSubtree(this.$.monthChart, true);
—at the beginning of ready. This tells Polymer to watch the given subtree for changes and apply the given styles whenever nodes appended to it by other libraries, such as D3.
Here's a fork of your Plunk with that.
I made this simple SVG animation HERE , The code for drawing the dashed lines is below:
$(document).ready(function() {
var offset = parseInt($('#move-opacity').attr("offset"));
setInterval(function() {
$('#move-opacity').attr("offset", offset + "%");
if (offset < 100) {
$('#last-opacity').attr("offset", (offset + 1) + "%");
}
offset++;
}, 25);
/* code for secound line animation */
var offset1 = parseInt($('#move-opacity-1').attr('offset'));
setInterval(function() {
$('#move-opacity-1').attr("offset", offset + "%");
if (offset < 100) {
$('#last-opacity-1').attr("offset", (offset + 1) + "%");
}
offset++;
}, 25);
$("#lock").attr( "class" , "animated bounceInUp");
$("#quote-icon").attr( "class" , "animated bounceInUp delay-05s");
$("#lock").addClass("animated bounceInUp");
});
Now if you notice clearly even the arrow is overridden with a dashed arrow , once the line is drawn , how to prevent this from happening ?
The actual problem is because the polygon that produces the arrow head already has class='st0' which produces a yellow colored fill and the below code is also adding a yellow colored gradient as a stroke to the arrow head and thus you are ending up seeing both.
#dotted-lines-1 {
stroke: url(#yellow-gradient);
fill: none;
stroke-width:3;
stroke-miterlimit: 10;
stroke-dasharray:4.8732,2.9239;
}
#dotted-lines-2 {
stroke: url(#yellow-gradient);
fill: none !important;
stroke-width:3;
stroke-miterlimit: 10;
stroke-dasharray:4.8732,2.9239;
}
To overcome the issue, apply the yellow gradient only to the line and path elements within the g like in the below code block.
#dotted-lines-1 line, #dotted-lines-1 path {
stroke: url(#yellow-gradient);
fill: none;
stroke-width:3;
stroke-miterlimit: 10;
stroke-dasharray:4.8732,2.9239;
}
#dotted-lines-2 line, #dotted-lines-2 path {
stroke: url(#yellow-gradient);
fill: none !important;
stroke-width:3;
stroke-miterlimit: 10;
stroke-dasharray:4.8732,2.9239;
}
Fiddle Demo