D3 轴过渡答案

【问题标题】：D3 Axis transitionD3 轴过渡
【发布时间】：2016-01-13 19:23:12
【问题描述】：

可视化是一个条形图，其中条形高度的范围很大（几个数量级）。我已经建立了一个由点击触发的转换，它将所有条形的高度增加了一个倍数。我还希望 y 轴刻度和标签过渡到条形的新比例。我已经改变了 y 轴刻度的域。条形高度过渡效果很好。轴过渡什么都不做。我似乎无法正确地得到轴过渡。任何人都可以帮忙吗？

代码是我正在尝试做的一个简单示例 - 数据是固定的。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../static/js/d3.js"></script>
<style type="text/css">
.axis, .axis text {
    font: 10px sans-serif;
}

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.tick text {
    font-family: sans-serif;
    fill: black;
}
</style>
</head>
<body>
<script type="text/javascript">

var xSize = 900,
ySize = 500;

var data = [10000, 3000, 100, 40, 10, 5, 1];

var margin = {top:40, right: 40, bottom:60, left: 60};
var width = xSize - margin.left - margin.right;
var height = ySize - margin.top - margin.bottom;

var barwidth = width / data.length;
var xscale = d3.scale.linear().domain([0, data.length]).range([0, width]);
var maxData = d3.max(data);
var yscale = d3.scale.linear().domain([0, maxData]).range([height, 0]);

var xAxis = d3.svg.axis().scale(xscale).orient("bottom");
var yAxis = d3.svg.axis().scale(yscale).orient("left");

var fieldView = d3.select("body")
    .append("svg")
    .attr("width", xSize)
    .attr("height", ySize)
    .on("click", update)
;
var chart = fieldView
    .append("g")
    .attr("id", "clip")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
;
var bar = chart.selectAll("g")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {return xscale(i);})
    .attr("y", function(d) { return yscale(d);})
    .attr("height", function(d) { return height - yscale(d);})
    .attr("width", barwidth)
    .attr("fill", "steelblue")
    .attr("clip-path", "url(#clip)")
;

chart.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
;

chart.append("g")
    .attr("class", "y axis")
    .call(yAxis)
;

var transitionScale = 1;
var transitionMultiplier = 5;
var transitionYscale = d3.scale.linear().domain([0, maxData])
    .range([height, 0]);
function update() {
    // new multiplier for data
    transitionScale *= transitionMultiplier;
    // update to y axis domain
    yscale.domain([0, maxData / transitionScale]);
    // transition the bars
    bar
        .transition()
        .attr("y", function(d) {return yscale(d);})
        .attr("height", function(d) {return height - yscale(d);})
        .duration(2000)
        .ease("linear")
    ;
    // transition the y-axis
    chart
        .selectAll(".y axis")
        .transition()
        .call(yAxis)
    ;
}
</script>
</body>
</html>

【问题讨论】：

标签： transition axis

【解决方案1】：

从以下位置更改轴过渡选择：

chart.selectAll(".y 轴")

到：

chart.selectAll(".y.axis")

使轴正确过渡。但是，我不知道为什么。

【讨论】：

啊，我愿意。 "chart.selectAll(".y axis")" 是无效选择，因为 dom 中没有元素。通过该选择，您将尝试选择所有具有类“y”的父元素的元素。此外，当您创建轴时，您会执行：“ .attr("class", "x axis") ”。您实际上是在元素上设置 2 个类。因此，如果要选择具有这两个类的所有元素，则需要执行 chart.selectAll(".y.axis")。我希望这是有道理的:-)
我想我明白了。由于我在创建 dom 对象“g”以包含 y 轴时设置了两个类“y”和“axis”，因此“chart.selectAll(“.y”) 足以选择 y 轴进行过渡。我发现这是真的。感谢您的帮助。