Wie 'klicken, mouseover, mousedown' und so weiter in d3 v4 verwenden

Ich arbeite an diesem Force-Diagramm in D3 v4. Wenn ein Benutzer seine Maus bewegt, wird die Farbe der Leiste geändert. In d3 v3 kann mein Code sehr gut funktionieren. Aber wenn ich es in d3 v4 verwende, funktioniert es nicht. In der offiziellen Einführung kann ich folgendes verwenden:Wie 'klicken, mouseover, mousedown' und so weiter in d3 v4 verwenden

selection.on("mousedown touchstart", function() { 
    console.log(d3.event.type); 
});

Aber es kann immer noch nicht funktionieren. Hier ist mein Code:

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

ich ein Anfänger bin, können Sie mir helfen? Oder mir einen nützlichen Vorschlag zu geben, ist auch okay. Vielen Dank!

Quelle

2016-11-29 Charlie

Die Registrierung von Mouseover und Mouseout ist in d3.v4 gleich, genauso wie das, was Sie tun.

Aber statt mit 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 
      });

Sie verwendet haben, sollten style:

.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 
      });

Arbeits Code here

Quelle

2016-11-29 11:48:23 Cyril

Es ist erwähnenswert, dass Attribute zu Stil SVG-Elemente verwendet, ist völlig in Ordnung, Im Algemeinen. In diesem Fall wurde das Styling jedoch ursprünglich über die '.MyRect'-Klasse angewendet. Damit der Übergang wie erwartet funktioniert, muss ein Quellenstil in einen Zielstil * oder * ein Quellenattribut in ein Zielattribut umgewandelt werden. Sie müssen konsistent sein und nicht versuchen, vom Stilwert zum Attributwert überzugehen. – altocumulus

Vielen Dank für Ihre Hilfe! Mein Code kann gut funktionieren! Danke – Charlie

Wie 'klicken, mouseover, mousedown' und so weiter in d3 v4 verwenden

Antwort

Verwandte Themen