Я создаю масштабируемые солнечные лучи, подобные этому примеру. Проблема в том, что у меня много данных в моем солнечном луче, поэтому текстовые метки смешаны и плохо читаемы. Поэтому я хотел бы скрыть метки, когда они слишком малы, как в этом d3. пример partition.layout. Как мне реализовать эту функцию?
Как скрыть текстовые метки в d3, когда узлы слишком малы?
Ответы (2)
Я только что получил это, добавив следующее:
var kx = width / root.dx, ky = height / 1;
Затем в разделе текстового объявления сделайте следующее:
var text = g.append("text")
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return y(d.y); })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("opacity", function(d) { return d.dx * ky > 10 ? 1 : 0; })
.text(function(d) { return d.name; });
Ключевой частью вышеизложенного является эта строка:
.attr("opacity", function(d) { return d.dx * ky > 10 ? 1 : 0; })
Это устанавливает непрозрачность на 0, если она недостаточно велика. Затем в функции щелчка вам нужно сделать то же самое, а именно так:
function click(d) {
// fade out all text elements
text.transition().attr("opacity", 0);
kx = (d.y ? width - 40 : width) / (1 - d.y);
ky = height / d.dx;
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.text(function(d) { return d.name; })
.attr("opacity", function(d) { return e.dx * ky > 10 ? 1 : 0; })
.attr("transform", function() { return "rotate(" + computeTextRotation(e) + ")" })
.attr("x", function(d) { return y(d.y); });
}
});
}
person
Dan Herman
schedule
28.02.2017
Чтобы реализовать это в целом, вам нужно будет нарисовать текстовый элемент, получить его реальный размер с помощью getBBox()
и, в зависимости от этого размера, либо показать его, либо нет. Код будет выглядеть примерно так.
svg.append("text")
.style("opacity", function() {
var box = this.getBBox();
if(box.width <= available.width && box.height <= available.height) {
return 1; // fits, show the text
} else {
return 0; // does not fit, make transparent
}
});
Конечно, вы также можете полностью удалить элемент text
, но для этого потребуется отдельный проход.
person
Lars Kotthoff
schedule
16.09.2013
В моем случае
this.getBBox();
всегда возвращает SVGRect {height: 0, width: 0, y: 0, x: 0}
. знак равно
- person Elfayer; 04.06.2014
Вы установили содержание? Вы можете задать отдельный вопрос об этом.
- person Lars Kotthoff; 04.06.2014