试图添加x和y轴D3

Question

我正在尝试将x和y轴添加到下面的图表中，但它没有显示出来。我尝试添加.attr（“transform”，“translate（0，”+ height +“）”）但是当我这样做时，轴线消失了。

以下是bl.ocks.org上的完整代码 https://bl.ocks.org/centem/4c07de861547789463d77db434fcaed7

添加轴的D3代码：

        var x = d3.scale.linear().range([0, w]);
            var y = d3.scale.linear().range([h, 0]);

            var xAxis = d3.svg.axis().scale(x)
                .orient("bottom").ticks(5);

            var yAxis = d3.svg.axis().scale(y)
                .orient("left").ticks(5);

            svg.append("g")
                .attr("class", "x axis")
                .call(xAxis);

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

Answer 1

您应该指定边距。你的y轴没有显示，因为它在你的svg之外（检查gif）：

您应该指定边距并以这种方式绘制您的svg：

var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 50
};
var w = 400 - margin.left - margin.right;
var h = 325 - margin.top - margin.bottom;

...
  // Create svg elementFromPoint
  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

此外，您应该在图表底部移动x轴：

  svg.append("g")
    .attr("class", "x axis")
    .attr('transform', 'translate(0,' + h + ')')
    .call(xAxis);

检查固定示例。

var myData = [21, 2, 5, 21, 15];
// width and height

var yScale = null;
var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 50
};
var w = 400 - margin.left - margin.right;
var h = 325 - margin.top - margin.bottom;

function draw(initialData) {
  var xScale = d3.scale.ordinal()
    .domain(d3.range(initialData.length))
    .rangeRoundBands([0, w], 0.05);

  yScale = d3.scale.linear()
    .domain([0, d3.max(initialData)])
    .range([0, h]);

  // Create svg elementFromPoint
  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.selectAll("rect")
    .data(initialData)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      return xScale(i);
    })
    .attr("y", function(d) {
      return h - yScale(d);
    })
    .attr("width", xScale.rangeBand())
    .attr("height", function(d) {
      return yScale(d);
    })
    .attr("fill", "steelblue");

  svg.selectAll("text")
    .data(initialData)
    .enter()
    .append("text")
    .text(function(d) {
      return d;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
      return xScale(i) + xScale.rangeBand() / 2;
    })
    .attr("y", function(d) {
      return h - yScale(d) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");

  // Here trying to add x and y axis
  var x = d3.scale.linear().range([0, w]);
  var y = d3.scale.linear().range([h, 0]);

  var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

  var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

  svg.append("g")
    .attr("class", "x axis")
    .attr('transform', 'translate(0,' + h + ')')
    .call(xAxis);

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

}

draw(myData);

//update function
function update(newData) {
  yScale.domain([0, d3.max(newData)]);

  var rects = d3.select("#chart svg")
    .selectAll("rect")
    .data(newData);

  // enter selection
  rects
    .enter().append("rect");

  // update selection 
  rects
    .transition()
    .duration(300)
    .attr("y", function(d) {
      return h - yScale(d);
    })
    .attr("height", function(d) {
      return yScale(d);
    })

  // exit selection
  rects
    .exit().remove();

  var texts = d3.select("#chart svg")
    .selectAll("text")
    .data(newData);

  // enter selection
  texts
    .enter().append("rect");

  // update selection
  texts
    .transition()
    .duration(300)
    .attr("y", function(d) {
      return h - yScale(d) + 14;
    })
    .text(function(d) {
      return d;
    })

  // exit selection
  texts
    .exit().remove();
}

var newData = [10, 13, 5, 9, 11];

d3.select("#update").on("click", function() {
  update(newData);
});

body {
  font: 12px Arial;
}

.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>
<button id="update">Update</button>