javascript - 轴的过渡

Question

为了创建 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);

所有更新都正常，但是CSS似乎没有任何影响？

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

Answer 1

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

1. 你是对的，所有 JavaScript 代码都不需要定位 .domain 和 .tick，因为这可以通过 CSS 实现:

   .domain, .tick {
     stroke: black;
     shape-rendering: crispEdges;
   }
   
   .domain {
     fill: none;
   }
   

2. 要创建轴，请执行以下操作:

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

   要为轴设置动画，您只需在调用之前添加过渡:

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