如何在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>