如何在D3中的mouseover上製作更大的條形？

Question

我試圖做的

.somediv:hover { 
    -webkit-transform:scale(1.1, 1.1); 
    -moz-transform:scale(1.1, 1.1); 
    -ms-transform:scale(1.1, 1.1); 
    -o-transform:scale(1.1, 1.1); 
    transform: scale(1.1); 
} 

.somediv { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

在D3相當。

我有一個條形圖/直方圖，我想將鼠標懸停在上面，並使其在鼠標懸停時的顏色變得更大，顏色更深，並使鼠標懸停時恢復原始形狀和大小。

我試圖給svg元素添加一個mouseover事件，但它不起作用。酒吧只是右移或左移，極端角落上的一些酒吧消失，而不是變得更大。

svg.selectAll("rect") 
       .data(dataset) 
       .enter() 
       .append("rect") 
       .attr("x", function(d,i) { 
        return i * (width/dataset.length); 
       }) 
       .attr("y", function(d) { 
        return height-(d*myheight); 
       }) 
       .attr("width", width/dataset.length - barPadding) 
       .attr("height", function(d) { 
         return d*myheight; 
       }) 
       .attr("fill", function(d) { 
         return "rgb(0, 0, " + (d * 8) + ")"; 
       }) 

       .on("mouseover", function(d,i) { 
       d3.select(this) 
       .attr("transform", "scale(1.1,1.1)"); 
       } 

我該如何解決這個問題？

Answer 1

你可以嘗試使用CSS轉換屬性，這將允許您設置transform-origin: 50% 50%;，所以他們會從中心規模，而不是你看到的一個方向。

.on("mouseover", function(d,i) { 
    d3.select(this) 
     .style("transform", "scale(1.1,1.1)") 
     .style("transform-origin", "50% 50%"); 
} 

Answer 2

我建議你不要使用一個SVG縮放轉換，使你的酒吧更大。原因很簡單：scale以SVG的原點（0,0）爲中心，即SVG的左上角。因此，任何不在該位置（0,0）的元素似乎都會移動（請參閱我的答案：SVG Circle element jumps upon scale transform）。這就解釋了你描述的行爲：

酒吧只是右移或左移，極端角落上的一些酒吧消失，而不是變大。

這就是說，我建議你使用一個簡單的D3函數來改變你的酒吧。在這一點上，你的問題對於S.O來說幾乎「太寬泛」了。 （因爲有幾種方法可以增加鼠標懸停條），但這裏是，例如，它加入了在酒吧的每一側10px的一個例子：

.on("mouseover", function(d, i) { 
     var xPos = +d3.select(this).attr("x") 
     var wid = +d3.select(this).attr("width"); 
     d3.select(this).attr("x", xPos - 10).attr("width", wid + 20); 
    }).on("mouseout", function() { 
     d3.select(this).attr("x", function(d) { 
       return xScale(d.name) 
      }) 
      .attr("width", xScale.bandwidth()); 
    }); 

我只是增加的寬度因爲作爲dataviz設計師，我認爲更改條形碼（編碼信息）的高度會誤導用戶。

這裏是一個演示：

var w = 300, 
 
    h = 100, 
 
    padding = 20; 
 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", w) 
 
    .attr("height", h); 
 

 
var data = [{ 
 
    name: "foo", 
 
    value: 50 
 
}, { 
 
    name: "bar", 
 
    value: 80 
 
}, { 
 
    name: "baz", 
 
    value: 20 
 
}]; 
 

 
var xScale = d3.scaleBand() 
 
    .range([0, w]) 
 
    .domain(data.map(function(d) { 
 
     return d.name 
 
    })) 
 
    .paddingInner(0.4) 
 
    .paddingOuter(0.2); 
 

 
var xAxis = d3.axisBottom(xScale); 
 

 
var bars = svg.selectAll(".bars") 
 
    .data(data) 
 
    .enter() 
 
    .append("rect"); 
 

 
bars.attr("x", function(d) { 
 
     return xScale(d.name) 
 
    }) 
 
    .attr("width", xScale.bandwidth()) 
 
    .attr("y", function(d) { 
 
     return (h - padding) - d.value 
 
    }) 
 
    .attr("height", function(d) { 
 
     return d.value 
 
    }) 
 
    .attr("fill", "teal") 
 
    .on("mouseover", function(d, i) { 
 
     var xPos = +d3.select(this).attr("x") 
 
     var wid = +d3.select(this).attr("width"); 
 
     d3.select(this).attr("x", xPos - 10).attr("width", wid + 20); 
 
    }).on("mouseout", function() { 
 
     d3.select(this).attr("x", function(d) { 
 
       return xScale(d.name) 
 
      }) 
 
      .attr("width", xScale.bandwidth()); 
 
    }); 
 

 
var gX = svg.append("g") 
 
    .attr("transform", "translate(0," + (h - padding) + ")") 
 
    .call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>