Javascript d3尖端不';不能在多行图表中工作
我正在学习如何在多行图表中使用d3提示。我举这个例子练习: 我已经在代码中添加了d3提示,但是工具提示没有出现。图表显示正确,但当我检查控制台时:未捕获类型错误:无法读取指向此代码行的未定义属性“值”::Javascript d3尖端不';不能在多行图表中工作,javascript,d3.js,Javascript,D3.js,我正在学习如何在多行图表中使用d3提示。我举这个例子练习: 我已经在代码中添加了d3提示,但是工具提示没有出现。图表显示正确,但当我检查控制台时:未捕获类型错误:无法读取指向此代码行的未定义属性“值”:: .html(function(d) { return "<b>" + d.value + "</b>"; }) .html(函数(d){ 返回“+d.value+”; }) 在这里,我向您展示脚本: <script src="d3/d3.min
.html(function(d) {
return "<b>" + d.value + "</b>";
})
.html(函数(d){
返回“+d.value+”;
})
在这里,我向您展示脚本:
<script src="d3/d3.min.js" charset="utf-8"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%b %Y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([0, 5])
.direction('n')
.html(function(d) {
return "<b>" + d.value + "</b>";
})
// Define the line
var priceline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
// Adds the svg canvas
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 + ")");
svg.call(tip);
// Get the data
d3.csv("stocks.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.value; })]);
// Nest the entries by symbol
var dataNest = d3.nest()
.key(function(d) {return d.name;})
.entries(data);
// Loop through each symbol / key
dataNest.forEach(function(d) {
svg.append("path")
.attr("class", "line")
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.attr("d", priceline(d.values))
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
function type(d) {
d.value = +d.value;
return d;
}
</script>
//设置画布/图形的尺寸
var margin={顶部:30,右侧:20,底部:30,左侧:50},
宽度=600-边距。左侧-边距。右侧,
高度=270-margin.top-margin.bottom;
//解析日期/时间
var parseDate=d3.time.format(“%b%Y”).parse;
//设定范围
var x=d3.time.scale().range([0,width]);
变量y=d3.scale.linear().range([height,0]);
//定义轴
var xAxis=d3.svg.axis().scale(x)
.方向(“底部”)。刻度(5);
var yAxis=d3.svg.axis().scale(y)
.方向(“左”)。勾号(5);
var tip=d3.tip()
.attr('class','d3 tip')
.偏移量([0,5])
.方向('n')
.html(函数(d){
返回“+d.value+”;
})
//界定界线
var priceline=d3.svg.line()
.x(函数(d){返回x(d.date);})
.y(函数(d){返回y(d.value);});
//添加svg画布
var svg=d3.选择(“主体”)
.append(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.附加(“g”)
.attr(“转换”,
“翻译(“+margin.left+”,“+margin.top+”);
svg.call(tip);
//获取数据
d3.csv(“stocks.csv”),函数(错误,数据){
data.forEach(函数(d){
d、 日期=解析日期(d.date);
d、 值=+d.值;
});
//缩放数据的范围
x、 域(d3.extent(数据,函数(d){返回d.date;}));
y、 域([0,d3.max(数据,函数(d){返回d.value;})];
//按符号嵌套条目
var dataNest=d3.nest()
.key(函数(d){返回d.name;})
.条目(数据);
//循环遍历每个符号/键
forEach(函数(d){
追加(“路径”)
.attr(“类”、“行”)
.on('mouseover',tip.show)
.on('mouseout',tip.hide)
.attr(“d”,价格线(d值))
});
//添加X轴
svg.append(“g”)
.attr(“类”、“x轴”)
.attr(“变换”、“平移(0)”、“高度+”)
.呼叫(xAxis);
//添加Y轴
svg.append(“g”)
.attr(“类”、“y轴”)
.呼叫(yAxis);
});
功能类型(d){
d、 值=+d.值;
返回d;
}
我改变了很多事情,但我找不到出路。有什么想法吗?
提前谢谢 您没有任何数据绑定到要调用工具提示的元素。您不需要循环,只需使用D3的数据绑定:
svg.selectAll("path")
.data(dataNest)
.enter()
.append("path")
.attr("class", "line")
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.attr("d", function(d) { return priceline(d.values); });
您可能还想重新定义工具提示功能:
.html(function(d) {
return "<b>" + d.key + "</b>";
});
.html(函数(d){
返回“+d.key+”;
});
太好了。它起作用了。谢谢@Lars!我的意图是用工具提示显示线的不同值。在工具提示功能中,我应该使用什么来代替d键?我只是尝试了几次,但是什么都没有。。。我想我不知道如何访问这些数据。谢谢@Lars。我知道那个例子。我发现它对我来说有点先进,但我会尝试从中吸取一些想法。