Javascript 如何更改D3.js中点的颜色以反映y刻度上的数据？_Javascript_D3.js

Javascript 如何更改D3.js中点的颜色以反映y刻度上的数据？

javascript d3.js

Javascript 如何更改D3.js中点的颜色以反映y刻度上的数据？,javascript,d3.js,Javascript,D3.js,我从d3.js开始，并决定构建一个天气图，但点（或节点？）不会像它们应该的那样改变颜色，即不是根据温度（y标度上的位置），而是根据它们在x标度上的位置？我做错了什么 <!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; s

我从d3.js开始，并决定构建一个天气图，但点（或节点？）不会像它们应该的那样改变颜色，即不是根据温度（y标度上的位置），而是根据它们在x标度上的位置？我做错了什么

<!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>


身体{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.线路{
填充：无；
笔画：钢蓝；
笔划宽度：2.5px；
}
多特先生{
填充：钢蓝；
笔画：钢蓝；
笔划宽度：1.5px；
}
var tooltip=d3。选择（'body'）。追加（'div'））
.style（'位置'，'绝对'）
风险值数据=[
[新日期（1961年0月1日），6.3]，
[新日期（2014年0月1日）9.4]
];
var margin={顶部：20，右侧：30，底部：30，左侧：40}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var tooltip=d3。选择（'body'）。追加（'div'））
.style（'位置'，'绝对'）
.style（'padding'，'0 10px'）
var colors=d3.scale.linear（）
.domain（[5,20]）
.range（['#000000'，'#ffffff']）
var x=d3.time.scale（）
.domain（[新日期（1960,0,1），新日期（2015,0,1）]）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.domain（[5,10]）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var line=d3.svg.line（）
.插入（“单调”）
.x（函数（d）{返回x（d[0]）；}）
.y（函数（d）{返回y（d[1]）；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.基准（数据）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“花被片（摄氏度）”；
追加（“路径”）
.attr（“类”、“行”）
.attr（“d”，行）；
svg.selectAll（“.dot”）
.数据（数据）
.enter（）.append（“圆”）
.风格（“笔划”，功能（d，i）{
返回颜色（i）；
})
.样式（“填充”，功能（d，i）{
返回颜色（i）；
})
.attr（“类”、“点”）
.attr（“cx”，line.x（））
.attr（“cy”，line.y（））
.attr（“r”，1.5）
.on（“鼠标悬停”，函数（d）{
html（d[1]+“ºC”）
.style（'left'，（d3.event.pageX-35）+'px'）
.style（'top'，（d3.event.pageY-30）+'px'）
.style（'font-size'，'15px'）
});

您的点当前由数据的数组索引着色。这样做会根据时间序列（x轴）给点上色

为了根据温度给你的圆圈上色，设置对颜色的调用如下。这将引用当前数组迭代中的第二个数据点（温度）

就这样！非常感谢！太好了，你能接受正确的答案吗？：）

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