Clever Geek Handbook

Change the class of one element on hover over another d3 element

I have a list of images and a list of image names. I want to show the hover state (css change) for the title when I hover over the corresponding image, but I cannot figure out how to connect the two pieces of data. My code is below. I have it so that when you click on the top number, the information appears below.

<!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>
0


source to share


1 answer


A quick and dirty solution is to simply use the index of the item to figure out which title matches that image:



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


source






More articles:


All Articles