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

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) {&nbsp; &nbsp; return h - (d.Value * 10) - (d.Value * 10 < 40 ? 40 : 0);})作为旁注，您应该使用 D3 音阶。在您的特定数据集中，值可以很容易地映射到 SVG 坐标，但几乎从来都不是这样。这是带有该更改的代码：var w = 750;var h = 300;var barPadding = 2;var dataset2 = [{&nbsp; &nbsp; "category": "A",&nbsp; &nbsp; "Value": 18,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "category": "B",&nbsp; &nbsp; "Value": 15,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "category": "C",&nbsp; &nbsp; "Value": 13,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "category": "D",&nbsp; &nbsp; "Value": 2,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "category": "E",&nbsp; &nbsp; "Value": 12,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "category": "F",&nbsp; &nbsp; "Value": 15,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "category": "G",&nbsp; &nbsp; "Value": 20,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "category": "H",&nbsp; &nbsp; "Value": 25,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; },&nbsp; {&nbsp; &nbsp; "category": "H",&nbsp; &nbsp; "Value": 30,&nbsp; &nbsp; "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png"&nbsp; }]//Create SVG elementvar svg = d3.select("body")&nbsp; .append("svg")&nbsp; .attr("width", w)&nbsp; .attr("height", h);svg.selectAll("rect")&nbsp; .data(dataset2)&nbsp; .enter()&nbsp; .append("rect")&nbsp; .attr("x", function(d, i) {&nbsp; &nbsp; return i * (w / dataset2.length);&nbsp; })&nbsp; .attr("y", function(d) {&nbsp; &nbsp; return h - (d.Value * 10);&nbsp; })&nbsp; .attr("width", w / dataset2.length - barPadding)&nbsp; .attr("height", function(d) {&nbsp; &nbsp; return d.Value * 10;&nbsp; })svg.selectAll(".images")&nbsp; .data(dataset2)&nbsp; .enter().append("svg:image")&nbsp; .attr("x", function(d, i) {&nbsp; &nbsp; return i * (w / dataset2.length) + 18;&nbsp; })&nbsp; .attr("y", function(d) {&nbsp; &nbsp; return h - (d.Value * 10) - (d.Value * 10 < 40 ? 40 : 0);&nbsp; })&nbsp; .attr("width", 40)&nbsp; .attr("height", 40)&nbsp; .attr("xlink:href", function(d, i) {&nbsp; &nbsp; return dataset2[i].URLimage&nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>