Я пытаюсь воспроизвести поведение кисти, как в этом примере: 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: Невозможно прочитать свойство "применить" неопределенного
Любое предложение было бы очень полезно! Благодарю.
В 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>