当它们不适合内部时，在条形图外部显示图表图像

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"  }]<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>