Javascript 如何使用'；单击、鼠标悬停、鼠标向下和#x27；在D3V4中也是如此
我正在D3V4中制作这个力图。 当用户移动鼠标时，条形图的颜色将改变。在D3V3中，我的代码可以很好地工作。但是当我在D3V4中使用它时，它就不起作用了。在官方介绍中，我可以这样使用：Javascript 如何使用'；单击、鼠标悬停、鼠标向下和#x27；在D3V4中也是如此,javascript,d3.js,Javascript,D3.js,我正在D3V4中制作这个力图。 当用户移动鼠标时，条形图的颜色将改变。在D3V3中，我的代码可以很好地工作。但是当我在D3V4中使用它时，它就不起作用了。在官方介绍中，我可以这样使用： selection.on("mousedown touchstart", function() { console.log(d3.event.type); }); 但它仍然不能工作。 这是我的密码： <html> <head> <meta charset="utf
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>
酒吧
.轴线路径，
.轴线{
填充：无；
笔画：黑色；
形状渲染：边缘清晰；
}
.轴文本{
字体系列：无衬线；
字体大小：11px；
}
MyRect先生{
填充：钢蓝；
}
.MyText{
填充物：白色；
文本锚定：中间；
}
var宽度=400；
var高度=400；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var padding={left:30，right:30，top:20，bottom:20}；
var数据集=[10,20,30,40,33,24,12,5]；
var xScale=d3.scaleBand（）
.domain（d3.range（dataset.length））
.range（[0，宽度填充。左填充。右]）
.填充（0.2）//这里有些价值
var yScale=d3.scaleLinear（）
.domain（[0，d3.max（数据集）]）
.范围（[高度填充。顶部填充。底部，0]）；
var xAxis=d3.axisBottom（）
.比例（xScale）；
var yAxis=d3.axisLeft（）
.比例尺（yScale）；
var=4；
var rects=svg.selectAll（“.MyRect”）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“类”、“MyRect”）
.attr（“转换”、“转换”（+padding.left+）、“+padding.top+”）
.attr（“x”，函数（d，i）{
返回xScale（i）+1/2；
} )
.attr（“y”，函数（d）{
返回yScale（d）；
})
.attr（“宽度”，xScale.bandwidth（）-rectpatting）
.attr（“高度”，功能（d）{
返回高度-padding.top-padding.bottom-yScale（d）；
})
.attr（“填充”、“钢蓝”）
.on（“鼠标悬停”，功能（d，i）{
d3.选择（本）
.attr（“填充”、“黄色”）；
})
.on（“mouseout”，函数（d，i）{
d3.选择（本）
.transition（）
.持续时间（500）
.attr（“填充”、“钢蓝”）；
});
var text=svg.selectAll（“.MyText”）
.数据（数据集）
.输入（）
.append（“文本”）
.attr（“类”、“我的文本”）
.attr（“转换”、“转换”（+padding.left+）、“+padding.top+”）
.attr（“x”，函数（d，i）{
返回xScale（i）+1/2；
})
.attr（“y”，函数（d）{
返回yScale（d）；
})
.attr（“dx”，函数（）{
返回（xScale.bandwidth（）-rectPadding）/2；
})
.attr（“dy”，函数（d）{
返回20；
})
.文本（功能（d）{
返回d；
})
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移”（“+padding.left+”，“+（height-padding.bottom）+”））
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“轴”）
.attr（“转换”、“转换”（+padding.left+）、“+padding.top+”）
.呼叫（yAxis）；
我是初学者，你能帮我吗？或者给我一个有用的建议也可以。谢谢 在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
});
样式.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
});
工作代码值得注意的是，通常使用属性来设置SVG元素的样式是非常好的。但是，在本例中，样式最初是通过
.MyRect