Zmień klasę jednego elementu po najechaniu na inny element d3

Question

Nov 12, 2013, 03:18 AM

Zmień klasę jednego elementu po najechaniu na inny element d3

Mam listę obrazów i listę tytułów obrazów. Chcę być w stanie pokazać stan najechania (zmienić css) dla tytułu, gdy najeżdżam myszką na odpowiadający mu obraz, ale nie wiem, jak połączyć te dwa dane. Mój kod jest poniżej. Mam go, więc po kliknięciu na górny numer informacje pojawiają się poniżej.

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