Jak zmienić kolor kropek w D3.js, aby odzwierciedlić dane dotyczące skali y?

Zaczynam od d3.js i zdecydowałem się zbudować wykres pogodowy, ale punkty (lub węzły?) Nie zmieniają koloru tak jak powinny, tj. Nie według temperatury (pozycja w skali y), lecz zgodnie z ich pozycją na x skala? Co ja robię źle?Jak zmienić kolor kropek w D3.js, aby odzwierciedlić dane dotyczące skali y?

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { 
    font: 10px sans-serif; 
} 

.axis path, 
.axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.line { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 2.5px; 
} 

.dot { 
    fill: steelblue; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

</style> 
<body> 
<script src="d3/d3.min.js" charset="utf-8"></script> 
<script> 

var tooltip = d3.select('body').append('div') 
    .style('position','absolute') 

var data = [ 
    [new Date(1961, 0, 1), 6.3], 
    [new Date(2014, 0, 1), 9.4] 
]; 

var margin = {top: 20, right: 30, bottom: 30, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var tooltip = d3.select('body').append('div') 
    .style('position', 'absolute') 
    .style('padding', '0 10px') 

var colors = d3.scale.linear() 
    .domain([5, 20]) 
    .range(['#000000','#ffffff']) 

var x = d3.time.scale() 
    .domain([new Date(1960, 0, 1), new Date(2015, 0, 1)]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([5, 10]) 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var line = d3.svg.line() 
    .interpolate("monotone") 
    .x(function(d) { return x(d[0]); }) 
    .y(function(d) { return y(d[1]); }); 

var svg = d3.select("body").append("svg") 
    .datum(data) 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

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("Teplota (ºC)"); 

svg.append("path") 
    .attr("class", "line") 
    .attr("d", line); 

svg.selectAll(".dot") 
    .data(data) 
    .enter().append("circle") 
    .style('stroke', function(d,i) { 
     return colors(i); 
    }) 
    .style('fill', function(d,i) { 
     return colors(i); 
    }) 
    .attr("class", "dot") 
    .attr("cx", line.x()) 
    .attr("cy", line.y()) 
    .attr("r", 1.5) 

    .on("mouseover", function(d) {  
      tooltip.html(d[1] + 'ºC') 
       .style('left', (d3.event.pageX - 35) + 'px') 
       .style('top', (d3.event.pageY - 30) + 'px') 
       .style('font-size', '15px') 

    }); 
</script>

Źródło

2016-01-04 Daniel Cupak

Twoje kropki są obecnie kolorowane według indeksu tablicy Twoich danych. Wykonanie tego w ten sposób spowoduje pokolorowanie kropek na podstawie ich szeregów czasowych (oś x).

Aby pokolorować swoje kręgi w zależności od ustawionej temperatury, wywołanie kolorów działa tak samo. To odniesie drugi punkt danych w bieżącej iteracji macierzy (temperatura).

svg.selectAll(".dot") 
    .data(data) 
    .enter().append("circle") 
    .style('stroke', function(d,i) { 
     return colors(d[1]); 
    }) 
    .style('fill', function(d,i) { 
     return colors(d[1]); 
    })

Źródło

2016-01-04 16:49:17

To wszystko! Dzięki za tonę! –

Dobrze, czy zaakceptowałbyś odpowiedź jako poprawną? :) –

Jak zmienić kolor kropek w D3.js, aby odzwierciedlić dane dotyczące skali y?

Odpowiedz

Powiązane problemy