轴的过渡

Transition of an axis

本文关键字：更新时间：2023-09-26

为了创建y轴，我拼凑了以下代码:

// Add y axis with ticks and tick markers
var axisPadding = 2;
var leftAxisGroup = svg
  .append('g')
  .style('font', '10px verdana')
  .attr({
    transform: 'translate(' + (margin.left - axisPadding) + ',' + (margin.top) + ')',
    id: "yAxisG"
  });
var axisY = d3.svg
  .axis()
  .orient('left')
  .scale(yScale);
var axisNodes = leftAxisGroup.call(axisY);
var domain = axisNodes
  .selectAll('.domain')
  .attr({
    fill: 'none',
    'stroke-width': 0.7,
    stroke: 'black'
  });
var ticks = axisNodes
  .selectAll('.tick')
  .attr({
    fill: 'none',
    'stroke-width': 0.7,
    stroke: 'black'
  });

我认为上面是非常复杂的，所以任何简化的提示将是感激的(我真的需要。domain和。tick吗?)

我的具体问题是如何将过渡应用到这个轴-为什么下面的小添加不能实现这一点?

// Add y axis with ticks and tick markers
var axisPadding = 2;
var leftAxisGroup = svgBar
  .append('g')
  .style('font', '10px verdana')
  .attr({
    transform: 'translate(' + (margin.left - axisPadding) + ',' + (margin.top) + ')'
  });
var axisY = d3.svg.transition().duration(750)   //<<<<<<<<<< HERE I ADDED .transition().duration(750) 
  .axis()
  .orient('left')
  .scale(yScale);
var axisNodes = leftAxisGroup.call(axisY);
var domain = axisNodes
  .selectAll('.domain')
  .attr({
    fill: 'none',
    'stroke-width': 0.7,
    stroke: 'black'
  });
var ticks = axisNodes
  .selectAll('.tick')
  .attr({
    fill: 'none',
    'stroke-width': 0.7,
    stroke: 'black'
  });

上面的代码从第549行开始:https://plnkr.co/edit/fc9hq7?p=preview

更新到目前为止，使用@Ashitaka的建议，我在我的css中添加了以下内容:

.domain {
    fill: 'none';
    stroke-width: 0.7;
    stroke: 'black';
}
.tick {
    fill: 'none';
    stroke-width: 0.7;
    stroke: 'black';
}

然后我将轴的初始创建简化为:

// Add y axis with ticks and tick markers
var axisPadding = 2;
var leftAxisGroup = svg
    .append('g')
    // .style('font', '10px verdana')
    .attr({
        transform: 'translate(' + (margin.left - axisPadding) + ',' + (margin.top) + ')',
        id: "yAxisG"
    });
var axisY = d3.svg.axis()
    .orient('left')
    .scale(yScale);
leftAxisGroup.call(axisY);

然后我将轴的更新简化为如下:

  var plotJ = d3.select("#yAxisG")
  var axisY = d3.svg.axis()
      .orient('left')
      .scale(yScale);
 plotJ.transition().duration(1000).call(axisY);

所有更新ok，但css似乎没有任何影响?

更新版本如下:https://plnkr.co/edit/tXt3vk?p=preview

这确实是两个问题，但以下是答案:

你是对的，不需要所有的JavaScript代码来瞄准.domain和.tick，因为这可以通过CSS实现:
```
.domain, .tick {
  stroke: black;
  shape-rendering: crispEdges;
}
.domain {
  fill: none;
}
```

要创建一个轴，您可以执行以下操作:

var yAxis = d3.svg.axis()
  .orient("left")
  .scale(yScale);
var domYAxis = mainGroup.append("g")
  .call(yAxis);

要动画一个轴，你只需要在call之前添加一个transition:

var domYAxis = mainGroup.append("g");
domYAxis.transition()
  .duration(750)
  .call(yAxis);

没有找到相关文章