как реализовать brush.move в d3 v3

1

Я пытаюсь воспроизвести поведение кисти, как в этом примере: https://bl.ocks.org/mbostock/87746f16b83cb9d5371394a001cbd772

Мое основное внимание уделяется тому, чтобы кисть выбирала весь x-range onclick. Вышеприведенный пример делает то же самое, но реализуется в d3v4. В d3v3 функции brush.move и.map() недоступны. Я пытаюсь d3v3 эквивалент brush.move. В настоящее время мой код выглядит так:

//brush slider display
                context.append("g")
                    .attr("class", "brush")
                    .call(brush)
                    .call(brush.event)
                    .selectAll("rect")
                    .attr("y", -6)
                    .attr("height", brushHeight + 7);

                context.append("g")
                    .call(brush)
                    .call(brush.event)
                    .selectAll(".overlay")
                    .on("mousedown touchstart", beforebrushed, true);

                /**
                 * beforeBrushed function
                 */
                function beforebrushed () {
                    logger.info("beforebrushed activated");
                    d3.event.stopImmediatePropagation();
                    d3.select(".brush").transition().call(brush.move, x.range());
                }

beforebrushed функция даже не называется. Вместо этого эта ошибка возникает в строке, где я использую brush.move. TypeError: Невозможно прочитать свойство "применить" неопределенного

Любое предложение было бы очень полезно! Благодарю.

Теги:
d3.js

1 ответ

0
Лучший ответ

В brush.move нет brush.move, вы должны использовать brush.event для этого

...
.call(brush)
.call(brush.event);
...

Я переписал blocks которые вы упомянули с d3v3. Проверьте, пожалуйста. Множество кода пришлось переписать. Если у вас есть вопросы, не стесняйтесь спросить.

var randomX = function() { return Math.random() * 10 },
    randomY = d3.random.normal(0.5, 0.12),
    data = d3.range(800).map(function() { return [randomX(), randomY()]; });

var svg = d3.select("svg"),
    margin = {top: 0, right: 50, bottom: 214, left: 10},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scale.linear()
		.range([0, width])
    .domain([0, 10]);
    
var defaultExtent = [3, 5];

var y = d3.scale.linear()
    .range([height, 0]);

var brush = d3.svg.brush()
	.x(x)
  .extent(defaultExtent)
	.on("brush", brushed)

var dot = g.append("g")
    .attr("fill-opacity", 0.2)
  .selectAll("circle")
  .data(data)
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; })
    .attr("r", 3.5);

var brushContainer = g.append("g")
    .attr("class", "brush")
    .call(brush)
    .call(brush.event);
    
brushContainer.selectAll("rect")
		.attr("height", height);
 
brushContainer.selectAll(".background")
  .on("mousedown", beforebrushed, true)
  .on("touchstart", beforebrushed, true);

g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .attr("class", "axis")
    .call(d3.svg.axis().scale(x));

function brushed() {
  var extent = brush.extent();

  dot.classed("selected", function(d) { return extent[0] <= d[0] && d[0] <= extent[1]; });
}

function beforebrushed() {
  d3.event.stopImmediatePropagation();
  
  brushContainer.transition()
  		.duration(700)
    	.call(brush.extent([0, 10]))
      .call(brush.event);
}
.selected {
  fill: red;
  fill-opacity: 1;
  stroke: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.js"></script>
<svg width="960" height="306"></svg>
  • 0
    Спасибо Михаил! да, решение, которое вы предоставили, работает правильно. Хотя для меня это работает только один раз, и тогда управление кистью перестает работать. Так что пытаюсь это исправить. Но спасибо за предоставленное решение :)
  • 0
    Можете ли вы объяснить значение этого кода: g.append ("g") .attr ("transform", "translate (0," + height + ")") .attr ("class", "axis"). (. d3.svg.axis () шкала (х)) вызова;
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню