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

这真的是两个问题，但这里有答案：

你是对的，所有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);

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

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

轴的过渡

1 个答案: