D3.jsのドットの色を変更してyスケールのデータを反映させる方法は？

私はd3.jsで始まり、天気グラフを作成することに決めましたが、ポイント（またはノード）は、温度（yスケール上の位置）ではなくx規模？私は間違って何をしていますか？D3.jsのドットの色を変更して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>

出典

2016-01-04 Daniel Cupak

あなたのドットは現在、データの配列インデックスによって着色されています。このようにすると、時系列（x軸）に基づいて点が色付けされます。

温度に基づいてサークルの色を設定するには、色の呼び出しがそのように機能します。これは、現在の配列の反復（温度）の2番目のデータポイントを参照します。

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]); 
    })

出典

2016-01-04 16:49:17

これだけです！ありがとう、トン！ –

優秀、あなたは正しい答えを受け入れてくださいますか？ :) –

D3.jsのドットの色を変更してyスケールのデータを反映させる方法は？

答えて

関連する問題