我正在D3 v4中处理此力图。当用户移动鼠标时，条的颜色将被更改。在d3 v3中，我的代码可以很好地工作。但是，当我在d3 v4中使用它时，它不起作用。在官方介绍中，我可以这样使用：
selection.on("mousedown touchstart", function() {
console.log(d3.event.type);
});
但是它仍然无法工作。这是我的代码：
<html>
<head>
<meta charset="utf-8">
<title>a bar</title>
</head>
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.MyRect {
fill: steelblue;
}
.MyText {
fill: white;
text-anchor: middle;
}
</style>
<body>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>
var width=400;
var height=400;
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var padding = {left:30, right:30, top:20, bottom:20};
var dataset=[10,20,30,40,33,24,12,5];
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.range([0, width-padding.left-padding.right])
.padding(0.2); //some value here
var yScale = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([height-padding.top-padding.bottom,0]);
var xAxis = d3.axisBottom()
.scale(xScale);
var yAxis = d3.axisLeft()
.scale(yScale);
var rectPadding=4;
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("width", xScale.bandwidth() - rectPadding )
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
})
.attr("fill","steelblue")
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");
});
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
})
.attr("y",function(d){
return yScale(d);
})
.attr("dx",function(){
return (xScale.bandwidth() - rectPadding)/2;
})
.attr("dy",function(d){
return 20;
})
.text(function(d){
return d;
})
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
</script>
</body>
</html>
我是初学者，您能帮我吗？或者给我一个有用的建议也可以。谢谢！
在d3.v4中注册mouseover和mouseout的操作与您所做的相同。
但是不要使用attr：
.on("mouseover",function(d,i){
console.log("hello")
d3.select(this)
.attr("fill","yellow");//it is style not attribute
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");//it is style not attribute
});
您应该使用过style：
.on("mouseover",function(d,i){
console.log("hello")
d3.select(this)
.style("fill","yellow");//it is style
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.style("fill","steelblue");//it is style
});
这里的工作代码
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句