Добавить кисть сверху d3 barchart

Я пытаюсь добавить кисть поверх бархарта в d3. В настоящее время я использую BarChart для моего примера: https://bl.ocks.org/mbostock/1134768 Добавить кисть сверху d3 barchart

Это пример кисти, которые я хочу реализовать: http://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

Я могу только найти примеры, когда втулка находится ниже графика, а не на главной диаграмму. Может ли кто-нибудь объяснить мне, как поместить кисть поверх баррикада или указать мне в сторону примера, которым я мог бы следовать?

источник

2016-09-30 medium

В соответствии с вашими примерами вы используете d3 v3? Если вы не ограничены версией, взгляните на версию 4 и модуль [щетка] (https://github.com/d3/d3-brush); он с некоторой легкостью сравнивает предыдущую функциональность кисти, и есть несколько примеров, использующих кисть на всей области (например [этот] (http://bl.ocks.org/mbostock/0d20834e3d5a46138752f86b9b79727e)). – mgc

Brush & Zoom В примере вы ссылаетесь, есть следующие строки:

var focus = svg.append("g") 
    .attr("class", "focus") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var context = svg.append("g") 
    .attr("class", "context") 
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 

... 
    svg.append("rect") 
     .attr("class", "zoom") 
     .attr("width", width) 
     .attr("height", height) 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(zoom);

Эти уточняющие положения области диаграммы, кисть области и область масштабирования. Вы можете просто настроить значения margin и margin2 значений, которые указаны в начале скрипта, или явно настроить здесь другое преобразование.

Вы должны иметь margin.top > margin2.top, а также корректировать нижние поля.

источник

2016-10-02 13:43:43 Nixie

Добавить кисть сверху d3 barchart

ответ

Смежные вопросы