javascript - 当图表图像不适合内部时，在栏外显示图表图像

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>