Javascript 如何在d3中的一对项目上执行鼠标悬停事件？_Javascript_D3.js

Javascript 如何在d3中的一对项目上执行鼠标悬停事件？

javascript d3.js

Javascript 如何在d3中的一对项目上执行鼠标悬停事件？,javascript,d3.js,Javascript,D3.js,我实际上添加了两列文本，如下所示如果我选择all.labels并对“this”执行鼠标悬停功能，则该功能将仅对鼠标下文本中的文本进行操作问题：如何编写on mouseover函数，使操作发生在“this”整行（两列）上我有一种感觉，这种期望的行为将要求我以不同的方式输入文本感谢您的指导 //column 1 svg.selectAll("labels") .data(data) .enter() .append("text") .attr("class",

我实际上添加了两列文本，如下所示

如果我选择all.labels并对“this”执行鼠标悬停功能，则该功能将仅对鼠标下文本中的文本进行操作

问题：如何编写on mouseover函数，使操作发生在“this”整行（两列）上

我有一种感觉，这种期望的行为将要求我以不同的方式输入文本

感谢您的指导

//column 1
svg.selectAll("labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("x", function(d) {
        if (xValue(d) < 0) {
            return xScale(xValue(d)) - 15;
            }
            else {
                return xScale(0) - 15;
                }
        })
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("text-anchor", "end")
    .attr("dy", ".35em")
    .text(function(d) { return d.lineitem + " " + parseFloat(d.diff).toFixed(1); });

//column 2
svg.selectAll("labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("x", xScale(d3.max(data, xValue)) + 50)
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("dy", ".35em")
    .text(function(d) { return parseFloat(d.time0).toFixed(1); });

//第1列
svg.selectAll（“标签”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“类别”、“标签”）
.attr（“x”，函数（d）{
如果（x值（d）<0）{
返回xScale（xValue（d））-15；
}
否则{
返回xScale（0）-15；
}
})
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“文本锚定”、“结束”）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.lineitem+“”+parseFloat（d.diff.toFixed（1）；}）；
//第2栏
svg.selectAll（“标签”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“类别”、“标签”）
.attr（“x”，x刻度（d3.max（数据，x值））+50）
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“dy”，“.35em”）
.text（函数（d）{return parseFloat（d.time0）.toFixed（1）；}）；

试试这种方法

//column 1
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("id",function(d,i){ return "column1_"+i; }) //Add a unique id with it's column name
    .attr("class", "labels")
    .attr("x", function(d) {
        if (xValue(d) < 0) {
            return xScale(xValue(d)) - 15;
            }
            else {
                return xScale(0) - 15;
                }
        })
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("text-anchor", "end")
    .attr("dy", ".35em")
    .text(function(d) { return d.lineitem + " " + parseFloat(d.diff).toFixed(1); });

//column 2
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("id",function(d,i){ return "column2_"+i; }) //Add a unique id with it's column name
    .attr("x", xScale(d3.max(data, xValue)) + 50)
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("dy", ".35em")
    .text(function(d) { return parseFloat(d.time0).toFixed(1); });

svg.selectAll(".labels").on("mouseover,funtion(d,i){
   d3.select("#column1_"+i).style("opacity",0.2); //Perform the same action on text in column1
   d3.select("#column2_"+i).style("opacity",0.2); //Perform the same action on text in column2
});

//第1列
svg.selectAll（“.labels”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“id”，函数（d，i）{return“column1_211;”+i；}）//用列名添加唯一的id
.attr（“类别”、“标签”）
.attr（“x”，函数（d）{
如果（x值（d）<0）{
返回xScale（xValue（d））-15；
}
否则{
返回xScale（0）-15；
}
})
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“文本锚定”、“结束”）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.lineitem+“”+parseFloat（d.diff.toFixed（1）；}）；
//第2栏
svg.selectAll（“.labels”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“类别”、“标签”）
.attr（“id”，function（d，i）{return“column2_”+i；}）//用列名添加唯一的id
.attr（“x”，x刻度（d3.max（数据，x值））+50）
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“dy”，“.35em”）
.text（函数（d）{return parseFloat（d.time0）.toFixed（1）；}）；
svg.selectAll（“.labels”）。打开（“鼠标上方，功能（d，i）”{
d3.选择（“#column1"”+i）.style（“不透明”，0.2）；//对column1中的文本执行相同的操作
d3.选择（“#column2#”+i）.style（“不透明”，0.2）；//对column2中的文本执行相同的操作
});

试试这种方法

//column 1
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("id",function(d,i){ return "column1_"+i; }) //Add a unique id with it's column name
    .attr("class", "labels")
    .attr("x", function(d) {
        if (xValue(d) < 0) {
            return xScale(xValue(d)) - 15;
            }
            else {
                return xScale(0) - 15;
                }
        })
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("text-anchor", "end")
    .attr("dy", ".35em")
    .text(function(d) { return d.lineitem + " " + parseFloat(d.diff).toFixed(1); });

//column 2
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("id",function(d,i){ return "column2_"+i; }) //Add a unique id with it's column name
    .attr("x", xScale(d3.max(data, xValue)) + 50)
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("dy", ".35em")
    .text(function(d) { return parseFloat(d.time0).toFixed(1); });

svg.selectAll(".labels").on("mouseover,funtion(d,i){
   d3.select("#column1_"+i).style("opacity",0.2); //Perform the same action on text in column1
   d3.select("#column2_"+i).style("opacity",0.2); //Perform the same action on text in column2
});

//第1列
svg.selectAll（“.labels”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“id”，函数（d，i）{return“column1_211;”+i；}）//用列名添加唯一的id
.attr（“类别”、“标签”）
.attr（“x”，函数（d）{
如果（x值（d）<0）{
返回xScale（xValue（d））-15；
}
否则{
返回xScale（0）-15；
}
})
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“文本锚定”、“结束”）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.lineitem+“”+parseFloat（d.diff.toFixed（1）；}）；
//第2栏
svg.selectAll（“.labels”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“类别”、“标签”）
.attr（“id”，function（d，i）{return“column2_”+i；}）//用列名添加唯一的id
.attr（“x”，x刻度（d3.max（数据，x值））+50）
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“dy”，“.35em”）
.text（函数（d）{return parseFloat（d.time0）.toFixed（1）；}）；
svg.selectAll（“.labels”）。打开（“鼠标上方，功能（d，i）”{
d3.选择（“#column1"”+i）.style（“不透明”，0.2）；//对column1中的文本执行相同的操作
d3.选择（“#column2#”+i）.style（“不透明”，0.2）；//对column2中的文本执行相同的操作
});

试试这种方法

//column 1
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("id",function(d,i){ return "column1_"+i; }) //Add a unique id with it's column name
    .attr("class", "labels")
    .attr("x", function(d) {
        if (xValue(d) < 0) {
            return xScale(xValue(d)) - 15;
            }
            else {
                return xScale(0) - 15;
                }
        })
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("text-anchor", "end")
    .attr("dy", ".35em")
    .text(function(d) { return d.lineitem + " " + parseFloat(d.diff).toFixed(1); });

//column 2
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("id",function(d,i){ return "column2_"+i; }) //Add a unique id with it's column name
    .attr("x", xScale(d3.max(data, xValue)) + 50)
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("dy", ".35em")
    .text(function(d) { return parseFloat(d.time0).toFixed(1); });

svg.selectAll(".labels").on("mouseover,funtion(d,i){
   d3.select("#column1_"+i).style("opacity",0.2); //Perform the same action on text in column1
   d3.select("#column2_"+i).style("opacity",0.2); //Perform the same action on text in column2
});

//第1列
svg.selectAll（“.labels”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“id”，函数（d，i）{return“column1_211;”+i；}）//用列名添加唯一的id
.attr（“类别”、“标签”）
.attr（“x”，函数（d）{
如果（x值（d）<0）{
返回xScale（xValue（d））-15；
}
否则{
返回xScale（0）-15；
}
})
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“文本锚定”、“结束”）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.lineitem+“”+parseFloat（d.diff.toFixed（1）；}）；
//第2栏
svg.selectAll（“.labels”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“类别”、“标签”）
.attr（“id”，function（d，i）{return“column2_”+i；}）//用列名添加唯一的id
.attr（“x”，x刻度（d3.max（数据，x值））+50）
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“dy”，“.35em”）
.text（函数（d）{return parseFloat（d.time0）.toFixed（1）；}）；
svg.selectAll（“.labels”）。打开（“鼠标上方，功能（d，i）”{
d3.选择（“#column1"”+i）.style（“不透明”，0.2）；//对column1中的文本执行相同的操作
d3.选择（“#column2#”+i）.style（“不透明”，0.2）；//对column2中的文本执行相同的操作
});

试试这种方法

//column 1
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("id",function(d,i){ return "column1_"+i; }) //Add a unique id with it's column name
    .attr("class", "labels")
    .attr("x", function(d) {
        if (xValue(d) < 0) {
            return xScale(xValue(d)) - 15;
            }
            else {
                return xScale(0) - 15;
                }
        })
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("text-anchor", "end")
    .attr("dy", ".35em")
    .text(function(d) { return d.lineitem + " " + parseFloat(d.diff).toFixed(1); });

//column 2
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("id",function(d,i){ return "column2_"+i; }) //Add a unique id with it's column name
    .attr("x", xScale(d3.max(data, xValue)) + 50)
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("dy", ".35em")
    .text(function(d) { return parseFloat(d.time0).toFixed(1); });

svg.selectAll(".labels").on("mouseover,funtion(d,i){
   d3.select("#column1_"+i).style("opacity",0.2); //Perform the same action on text in column1
   d3.select("#column2_"+i).style("opacity",0.2); //Perform the same action on text in column2
});

//第1列
svg.selectAll（“.labels”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“id”，函数（d，i）{return“column1_211;”+i；}）//用列名添加唯一的id
.attr（“类别”、“标签”）
.attr（“x”，函数（d）{
如果（x值（d）<0）{
返回xScale（xValue（d））-15；
}
否则{
返回xScale（0）-15；
}
})
.attr（“y”，函数（d）{return yScale（yValue（d））；}）
.attr（“文本锚定”、“结束”）
.attr（“dy”，“.35em”）
.text（函数（d）{return d.lineitem+“”+parseFloat（d.diff.toFixed（1）；}）；
//第2栏
svg.selectAll（“.labels”）
.数据（数据）
.输入（）
.append（“文本”）