javascript - SVG 太小，不包括刻度线和附加文本 d3.js

Question

我有一个条形图，不知何故，整个 svg 容器只是矩形以及落在矩形所在区域的所有内容，因此 y 轴刻度被留在容器之外。我怎样才能解决这个问题，以便顶部的文本和 y 轴刻度(图像)不会留在外面。

我的代码，

      var barsData = [{
        name: "walnuts",
        value: 332
      }, {
        name: "apples",
        value: 206
      }]

// mapBars start here
 /* Set chart dimensions */
    var widthBar   = 960,
        heightBar  = 250,
        marginBar  = {top:10, right:10, bottom:20, left:60};

    //subtract margins
    widthBar  = widthBar  - marginBar.left - marginBar.right;
    heightBar = heightBar - marginBar.top  - marginBar.bottom;

    //sort data from highest to lowest
    barsData = barsData.sort(function(a, b){ return b.value - a.value; });

    //Sets the y scale from 0 to the maximum data element

   var y =   d3.scale.ordinal()
            .domain(barsData.map(function(d){ return d.name}))
            .rangeRoundBands([0, heightBar], .1);

   var x = d3.scale.linear()
       .range([0, widthBar])
       .domain([0, d3.max(barsData, function(d){return d.value})])


    var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left')

    var barsSvg = d3.select("#chart")
        .append("svg")
        .attr("class", "barChart")
        .attr("width", "100%")
        .attr('preserveAspectRatio', 'xMidYMin')
        .attr("viewBox", '0 0 ' + parseInt(widthBar + marginBar.left + marginBar.right) + ' ' + parseInt(heightBar + marginBar.top + marginBar.bottom));

   var bar = barsSvg.selectAll(".bar")
        .data(barsData)
        .enter()
        .append("rect")
        .attr("id", function(d, i) {return "bar" + d.name;})
        .attr('class', 'mapBars')
        .attr("x", 0)
        .attr("y", function(d){ return y(d.name)})
        .attr("width", function(d) {return x(d.value)})
        .attr("height", y.rangeBand())
        .attr("fill", function(d, i){
          if(d.name == 'walnuts') {return '#006600'} else {return '#2980b9'}
                                    });

    var labelsBar = barsSvg.selectAll('text')
       .data(barsData)
       .enter()
       .append('text')
       .text(function(d){return d.value})
       .attr('x', marginBar.top)
       .attr('y', function(d, i) {return 90*i + 80;})
       .attr("font-size", "38px")
       .attr("fill", "#fff")
      .style("font-weight", "bold");;

    var y_xis = barsSvg.call(yAxis);



    var lineEnd = 270;

    var line = barsSvg.append("line")
    .attr('class', 'endLine')
      .attr("x1", function(){ return x(lineEnd)})
      .attr("x2", function(){ return x(lineEnd)})
      .attr("y1", 0)
      .attr("y2", heightBar)
      .attr("stroke-width", 6)
      .attr("stroke", "red")
      .attr("stroke-dasharray", "8,8")

   var myText =  barsSvg.append("text")
   .attr("x", function(){ return x(lineEnd - 107)})
   .attr("class", "myLabel")//easy to style with CSS
   .attr("y", 9)//magical number here
   .text("Winner crosses this line")
   .attr('fill', 'red')
   .attr('font-size', '25px');



    barsSvg.selectAll(".tick text").remove()

    barsSvg.selectAll(".tick")
    .each( function(d) {
        var p = d3.select(this);
         p.append("svg:image")
         .attr("x", -120)
         .attr("y", -40)
         .attr("dy", widthBar)
         .attr("width", 100)
         .attr("height", 100)
         .attr("xlink:href",
          function(d){
            if(d == 'walnuts') { return 'http://nutritionfacts.org/wp-content/uploads/2015/08/NF-Aug11-Walnuts-and-Artery-Function.jpg'}
            else if (d == 'apples') { return 'http://nutritionfacts.org/wp-content/uploads/2015/08/NF-Aug11-Walnuts-and-Artery-Function.jpg'}
          });
    })

see plunker

Answer 1

您应该编辑 svg viewBox

.attr("viewBox", '0 0 ' + parseInt(widthBar + marginBar.left + marginBar.right) + ' ' + parseInt(heightBar + marginBar.top + marginBar.bottom));

显示 x 或 y 中 0 下面的元素

.attr("viewBox", '-120 -40 ' + parseInt(widthBar + marginBar.left + marginBar.right) + ' ' + parseInt(heightBar + marginBar.top + marginBar.bottom));

我根据图像的相对位置选择了 -120 和 -40，尽管我可能错过了一些东西:如果太大/太小，请随意调整。