Может ли трансляция быть масштабируемой?

Question

Я нашел пример на потоковом графике, и мне интересно, может ли этот график быть масштабируемым, как линейный график, масштабируемый линейный график? Я не нашел ни одного примера, подобного "масштабируемому потоковому графику". Так возможно ли это в d3?

Answer 1

В парографе нет ничего особенного. Это масштабируемый, как и любой другой график SVG.

Например, я использую этот Steamgraph, созданный Майком Бостоком, добавив только это:

svg.call(d3.zoom().on("zoom", function() {
        svg.attr("transform", d3.event.transform)
    }))
    .append("g");

И вот результат: https://bl.ocks.org/GerardoFurtado/raw/da06a5c751c442589ed9851ab3d823fc/bfd6883b30588bc76185614835409f5e1b40dc73/

Или, если вы хотите увеличить только по оси X:

svg = svg.call(d3.zoom().on("zoom", function() {
    svg.attr("transform", "translate(" + d3.event.transform.x + ",0) scale(" + d3.event.transform.k + ",1)");
}))
.append("g");

И вот результат: https://bl.ocks.org/GerardoFurtado/raw/68eb354408724aafa77698640783b6f2/616094d7bee85ab33ca144518ce384e2064d4537/

Это простые демонстрации, просто чтобы показать вам, что это возможно. Тем не менее, правильное решение включает в себя изменение масштаба х и обрезание путей, что требует больше работы.