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>

当图表图像不适合放置在栏外时显示

1 个答案: