Question

我有一个图像列表和一个图像标题列表。当我将鼠标悬停在相应的图像上时，我希望能够显示标题的悬停状态（更改css），但我无法弄清楚如何连接这两个数据。我的代码如下。我有它，所以当你点击顶部数字时，信息会显示在下方。

<!DOCTYPE html>
<html>
<head>
<script src="d3.v2.js"></script>
<title>Untitled</title>

</head>
<body>

    <script type="text/javascript" >
    function barStack(d) {
    var l = d[0].length
    while (l--) {
    var posBase = 0, negBase = 0;
    d.forEach(function(d) {
        d=d[l]
        d.size = Math.abs(d.y)
        if (d.y<0)  {
            d.y0 = negBase
            negBase-=d.size
        } else
        { 
            d.y0 = posBase = posBase + d.size
        } 
    })
    }
    d.extent= d3.extent(d3.merge(d3.merge(d.map(function(e) { return e.map(function(f) {                 return [f.y0,f.y0-f.size]})}))))
return d
}


var ratiodata = [[{y:3.3}],[{y:-1.5}]]

var imageList = [
                [3.3, 28, -1.5, 13, 857, 3, 4, 7, [{paintingfile:"676496.jpg", title:"Dessert1"}, {paintingfile:"676528.jpg", title: "Dessert2"}]
                ]]


var h=400
var w=1350
var margin=25
var color = d3.scale.category10()

var div = d3.select("body").append("div")   
    .attr("class", "imgtooltip")               
    .style("opacity", 0);

var x = d3.scale.ordinal()
    .domain(['255'])
    .rangeRoundBands([margin,w-margin], .1)

var y = d3.scale.linear()
    .range([h-margin,0+margin])

var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0)
var yAxis = d3.svg.axis().scale(y).orient("left")

barStack(ratiodata)
y.domain(ratiodata.extent)

var svg = d3.select("body")
            .append("svg")
            .attr("height",h)
            .attr("width",w)

    svg.selectAll(".series")
       .data(ratiodata)
       .enter()
       .append("g")
       .classed("series",true)
       .style("fill","orange")
       .selectAll("rect").data(Object)
       .enter()
       .append("rect")
       .attr("x",function(d,i) { return x(x.domain()[i])})
       .attr("y",function(d) { return y(d.y0)})
       .attr("height",function(d) { return y(0)-y(d.size)})
       .attr("width",x.rangeBand());

    svg.selectAll("text")   
        .data(imageList)
        .enter()
        .append("text")
        .text(function(d) {
             return d[0];
            })          
        .attr("x", function(d, i) {
                    return x(x.domain()[i]) + x.rangeBand() / 2;
            })  
        .attr("y", function(d) {
                    return h - (32.1100917431*d[0] +150);
            })
        .attr("font-size", "16px")
        .attr("fill", "#000")
        .attr("text-anchor", "middle")
        //.on("click", function(d) {console.log(d[1]);})
        .on("click", function(d) {
            //Update the tooltip position and value
            d3.selectAll("ul")
              .remove();
            d3.selectAll("li")
              .remove();
            d3.select("#PaintingDetails")                   
              .append("ul")
              .selectAll("li")
              .data(d[8])
              .enter()
              .append("li")
              .text(function(d){
               return (d.title); 
                });                             
            d3.select("#imageBox")
              .append("ul")
              .selectAll("li")
              .data(d[8])
              .enter()
              .append("li")
              .classed("Myimageslist",true)
              .append("img")
              .classed("Myimages",true)
              .attr("src", function(d){
                   return ("http://images.tastespotting.com/thumbnails/" + d.paintingfile); 
                    })
              .attr("align", "top");      
            d3.select(".Myimages")
              .on("mouseover", function(){ 
                d3.select("#PaintingDetails")
                  .selectAll("li")
                  .classed("selected", true)
                  });
               });




    svg.append("g").attr("class","axis x").attr("transform","translate (0 "+y(0)+")").call(xAxis);
   // svg.append("g").attr("class","axis y").attr("transform","translate ("+x(margin)+" 0)").call(yAxis);


</script>
<div id="PaintingDetails"></div>
    <div id="imageBox"></div>        
    </body>
    </html>

Answer 1

快速而肮脏的解决方案是简单地使用数据元素的索引来确定哪个标题与哪个图像匹配：

d3.selectAll(".Myimages")
      .on("mouseover", function(d, i) { 
        d3.select("#PaintingDetails")
          .selectAll("li")
          .classed("selected", function(e, j) { return j == i; })
         });

将鼠标悬停在另一个元素d3上时更改一个元素的类

1 个答案: