Показывать изображения графиков за пределами бара, когда они не помещаются внутри

Question

У меня есть этот код Fiddle , который отображает гистограмму с изображениями, расположенными в верхней части каждого бара.

Для меньших значений я не хочу, чтобы изображение отображалось на панели, и хотелось бы, чтобы оно находилось сверху / снаружи панели. Например, 4-й столбец будет показывать изображение сверху, а не внутри. Есть ли умный способ добавить что-то условное, поскольку гистограмма будет использовать постоянно изменяющиеся данные, поэтому нужен способ определить, какие столбцы будут отображать изображение снаружи, а какие - внутри?

var w = 750;
var h = 300;
var barPadding = 2;



var dataset2 = [{
    "category": "A",
    "Value": 18,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "B",
    "Value": 15,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "C",
    "Value": 13,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "D",
    "Value": 2,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "E",
    "Value": 12,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "F",
    "Value": 15,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "G",
    "Value": 20,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "H",
    "Value": 25,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "H",
    "Value": 30,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  }
]

//Create SVG element
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

svg.selectAll("rect")
  .data(dataset2)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i * (w / dataset2.length);
  })
  .attr("y", function(d) {
    return h - (d.Value * 10);
  })
  .attr("width", w / dataset2.length - barPadding)
  .attr("height", function(d) {
    return d.Value * 10;
  })


svg.selectAll(".images")
  .data(dataset2)
  .enter().append("svg:image")
  .attr("x", function(d, i) {
    return i * (w / dataset2.length) + 18;
  })
  .attr("y", function(d) {
    return h - (d.Value * 10);
  })
  .attr("width", 40)
  .attr("height", 40)
  .attr("xlink:href", function(d, i) {
    return dataset2[i].URLimage
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

Answer 1

Здесь достаточно простого условного оператора:

.attr("y", function(d) {
    return h - (d.Value * 10) - (d.Value * 10 < 40 ? 40 : 0);
})

В качестве примечания следует использовать шкалы D3. В вашем конкретном наборе данных значения могут быть легко сопоставлены с SVG-координатами, но это почти никогда не так.

Вот ваш код с этим изменением:

var w = 750;
var h = 300;
var barPadding = 2;



var dataset2 = [{
    "category": "A",
    "Value": 18,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "B",
    "Value": 15,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "C",
    "Value": 13,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "D",
    "Value": 2,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "E",
    "Value": 12,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "F",
    "Value": 15,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "G",
    "Value": 20,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "H",
    "Value": 25,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  },
  {
    "category": "H",
    "Value": 30,
    "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"
  }
]

//Create SVG element
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

svg.selectAll("rect")
  .data(dataset2)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
    return i * (w / dataset2.length);
  })
  .attr("y", function(d) {
    return h - (d.Value * 10);
  })
  .attr("width", w / dataset2.length - barPadding)
  .attr("height", function(d) {
    return d.Value * 10;
  })


svg.selectAll(".images")
  .data(dataset2)
  .enter().append("svg:image")
  .attr("x", function(d, i) {
    return i * (w / dataset2.length) + 18;
  })
  .attr("y", function(d) {
    return h - (d.Value * 10) - (d.Value * 10 < 40 ? 40 : 0);
  })
  .attr("width", 40)
  .attr("height", 40)
  .attr("xlink:href", function(d, i) {
    return dataset2[i].URLimage
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>