Question

我有一个条形图，不知何故整个svg容器只是rects和所有落在rects所在区域的东西，因此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，虽然我可能错过了一些东西：如果它太大/太小，可以自由调整。

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

1 个答案: