Переместить объект-слайдер d3 в указанное место

Question

Переместить объект-слайдер d3 в указанное место

1

У меня есть код для слайдера:

var slider = d3.select('body').append('p').text('Title: ');

slider.append('label')
    .attr('for', 'threshold')
    .text('');
slider.append('input')
    .attr('type', 'range')
    .attr('min', d3.min(graph.links, function(d) {return d.value; }))
    .attr('max', d3.max(graph.links, function(d) {return d.value; }))
    .attr('value', d3.min(graph.links, function(d) {return d.value; }))
    .attr('id', 'threshold')
    .style('width', '50%')
    .style('display', 'block')
    .on('input', function () {
        var threshold = this.value;

        d3.select('label').text(threshold);

        var newData = [];
        graph.links.forEach( function (d) {
            if (d.value >= threshold) {newData.push(d); };
        });

  color.domain([d3.min(newData, function(d) {return d.value; }), d3.max(newData, function(d) {return d.value; })]).interpolator(d3.interpolateBlues);

        link = link.data(newData, function(d){ return d.value});
        link.exit().remove();
        var linkEnter = link.enter().append("path")
                      .style("stroke", function(d) { return color(d.value); })
                      .style("fill", "none")
                      .style("stroke-width", "3px");
        link = linkEnter.merge(link).style("stroke", function(d) { return color(d.value); });

        node = node.data(graph.nodes);

        simulation.nodes(graph.nodes)
    .on('tick', tick)
        simulation.force("link")
    .links(newData);

        simulation.alphaTarget(0.1).restart();

Где бы я положил .attr("transform", "translate(10,10)") чтобы поместить слайдер? Я пробовал, казалось бы, везде. В примере (https://bl.ocks.org/mbostock/6452972) сначала используется svg.append("g"), но я не мог получить это для интеграции с моим текущим кодом.

Cameron Taylor 13 июнь 2017, в 20:40

Источник

Теги:

javascript

d3.js

svg

1 ответ

Ещё вопросы

Andrew Reid · Accepted Answer · 2017-06-13T19-44-00.000Z

Ваш слайдер не является частью svg, он состоит из элементов, отличных от svg, добавленных к телу. Преобразования, подобные этим, относятся к элементам svg, а не к элементам non-svg html. Вам нужно будет обновить положение ваших элементов так же, как с помощью css.

Пример, на который вы ссылаетесь, создает слайдер svg, используя элементы svg для эмуляции слайдера. Ползунок содержится внутри элемента svg g и поэтому может быть перемещен с использованием .attr("transform","translate(x,y)")

Вы можете перемещать свой ползунок, как с любым другим элементом html/non-svg, используя css. Я создал пример ниже, который устанавливает начальное положение ползунка, а затем обновляет его при его сдвиге (с помощью selection.style()):

var slider = d3.select('body')
  .append('p')
  .text('Title: ')
  .attr("class","slider");

slider.append('label')
    .attr('for', 'threshold')
    .text('');
slider.append('input')
    .attr('type', 'range')
    .attr('min', 0)
    .attr('max', 100)
    .attr('value', 50)
    .attr('id', 'threshold')
    .style('display', 'block')
    .on('input', function () {
        var threshold = this.value;
       slider.style("top",threshold+"px");

        d3.select('label').text(threshold);

})

.slider {
  position: absolute;
  left: 100px;
  top: 50px;
  width: 120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Альтернативой является создание слайдера на основе svg и использование этого, используя метод преобразования в примере.

Всплывающая подсказка d3 от d3Noob является хорошим примером динамического размещения элементов html над элементами svg. Имейте в виду, что вам нужно знать, где svg относится к странице, чтобы правильно установить смещения.