问题描述:

I am new to this forum and thankful for all the help I can receive.

I tried searching for quite a bit on the shading the area under the graph with different colors but for some reason my code wont work with it. So I had to remove that piece of code.

I want to shade the area under my scatter plot with colors based on my data ( example: 0 to 2: red ; 2 to 5 : blue ; >5 : green ). I had found a code that applies a gradient in a vertical manner but I wanted the colors to appear horizontally across the graph.

The following is my javascript code:

var margin = {top: 20, right: 20, bottom: 30, left: 50},

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

//var parseDate = d3.time.format("%d-%b-%y").parse;

var x = d3.scale.linear()

.range([0, width]);

var y = d3.scale.linear()

.range([height, 0]);

var xAxis = d3.svg.axis()

.scale(x)

.orient("bottom");

var yAxis = d3.svg.axis()

.scale(y)

.orient("left");

var area = d3.svg.area()

.x(function(d) { return x(d.time); })

.y0(height)

.y1(function(d) { return y(d.conc); });

var svg = d3.select("body").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function make_x_axis() {

return d3.svg.axis()

.scale(x)

.orient("bottom")

.ticks(20)

function make_y_axis() {

return d3.svg.axis()

.scale(y)

.orient("left")

.ticks(20)

// load data

d3.json("convertcsv.json", function(data) {

data.forEach(function(d) {

d.conc = +d.conc;

d.time = +d.time;

});

x.domain(d3.extent(data, function(d) { return d.time; }));

y.domain([0, d3.max(data, function(d) { return d.conc; })]);

svg.append("area-gradient")

.attr("id", "temperature-gradient")

.attr("gradientUnits", "userSpaceOnUse")

.attr("x1", 0).attr("y1", y(50))

.attr("x2", 0).attr("y2", y(60))

.selectAll("stop")

.data([

{offset: "0%", color: "steelblue"},

{offset: "50%", color: "gray"},

{offset: "100%", color: "red"}

])

svg.append("path")

.datum(data)

.attr("class", "area")

.attr("d", area)

.style("fill", function(d) {

if (d.conc >= 5 ) {return "#00CC00"}

else if (d.conc < 5 && d.conc >= 2 ) { return "#0000CC" }

else { return "#00CC00"}

;})

svg.selectAll("dot")

.data(data)

.enter().append("circle")

.attr("r", 10)

.style("fill", function(d) { // <== Add these

if (d.conc >= 5 ) {return "#00CC00"} // <== Add these

else if (d.conc < 5 && d.conc >= 2 ) { return "#0000CC" }

else { return "#CC0000"} // <== Add these

;}) // <== Add these

.attr("cx", function(d) { return x(d.time); })

.attr("cy", function(d) { return y(d.conc); })

.on("mouseover", function(d) {

div.transition()

.duration(200)

.style("opacity", .9);

div .html(d.conc + "%")

.style("left", (d3.event.pageX) + "px")

.style("top", (d3.event.pageY - 28) + "px");

})

.on("mouseout", function(d) {

div.transition()

.duration(500)

.style("opacity", 0);

});

var div = d3.select("body").append("div")

.attr("class", "tooltip")

.style("opacity", 0);

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis);

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

.append("text")

.attr("transform", "rotate(-90)")

.attr("y", 6)

.attr("dy", ".71em")

.style("text-anchor", "end")

.text("Concentration");

svg.append("g")

.attr("class", "grid")

.attr("transform", "translate(0," + height + ")")

.call(make_x_axis()

.tickSize(-height, 0, 0)

.tickFormat("")

)

svg.append("g")

.attr("class", "grid")

.call(make_y_axis()

.tickSize(-width, 0, 0)

.tickFormat("")

)

});

网友答案:

You can define gradients in several directions, and even define the colors of each stop with CSS. It's better to define gradients under the defs tag in the SVG element. The direction of the linear gradient is given by the attributes x1, y1, x2 and y2. For instance, if you have x1 = 0, y1 = 1, x2 = 1 and y2 = 1, the gradient will be diagonal, from the upper left to the bottom right corner. Consider the following code:

var div = d3.select('#svg-container'),
    svg = div.append('svg');

svg.attr('width', width).attr('height', height);

// Create the svg:defs element and the main gradient definition.
var svgDefs = svg.append('defs');

// Define the gradient from (0, 0) to (1, 0) (horizontal)
var mainGradient = svgDefs.append('linearGradient')
    .attr('id', 'mainGradient')
    .attr('x1', 0).attr('y1', 1)
    .attr('x2', 0).attr('y2', 0);

// Create the stops of the main gradient. Each stop will be assigned
// a class to style the stop using CSS.
mainGradient.append('stop')
    .attr('class', 'stop-left')
    .attr('offset', '0%');

mainGradient.append('stop')
    .attr('class', 'stop-right')
    .attr('offset', '100%');

// Use the gradient to set the shape fill, via CSS.
svg.append('rect')
    .classed('filled', true)
    .attr('x', padding)
    .attr('y', padding)
    .attr('width', (width / 2) - 1.5 * padding)
    .attr('height', height - 2 * padding);

Also, you don't need to set the stop colors in JavaScripts, you can configure them using CSS.

<style>
    .stop-left {
        stop-color: #3f51b5;  /* Indigo */
    }
    .stop-right {
        stop-color: #009688;  /* Teal */
    }
    .filled { fill: url(#mainGradient); }
</style>

The result:

The complete code of this example is available as a gist. More details in the SVG linearGradient element in the MDN site. Regards,

相关阅读:
Top