javascript - 轴的过渡

为了创建我的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行开始：



更新

到目前为止，使用@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);

所有更新都可以，但是css似乎没有任何影响？

这是更新的版本：https://plnkr.co/edit/fc9hq7?p=preview

最佳答案

这确实是两个问题合二为一，但答案如下：


没错，因为CSS可以实现，所以不需要所有JavaScript代码都以.domain和.tick为目标：

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

要为轴设置动画，只需在transition之前添加call：

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