Selecting a single segment with a single click doesn't work?

6 views
Skip to first unread message

Vlado Z

unread,
Dec 1, 2016, 5:54:28 AM12/1/16
to d3-js
I tried to rework the code from this example: Brush Snapping 3
but the click-select for a segment doesn't work.
I can select arbitrary area and scroll it left/right but selecting a single segment with a single click doesn't work.

Any ideas why?

Here is my code:

(function(d3) {
    'use strict';

var random = d3.randomNormal(0, 0.2),
    sqrt3 = Math.sqrt(3),
    points0 = d3.range(300).map(function () {return [random() + sqrt3, random() + 1, 0];}),
    points1 = d3.range(300).map(function () {return [random() - sqrt3, random() + 1, 1];}),
    points2 = d3.range(300).map(function () {return [random(), random() - 1, 2];}),
    points = d3.merge([points0, points1, points2]),
    svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    k = (height / width),
    x0 = [-4.5, 4.5],
    y0 = [(-4.5 * k), (4.5 * k)],
    x = d3.scaleLinear().domain(x0).
range([0, width]),
    y = d3.scaleLinear().domain(y0).range([height, 0]),
    z = d3.scaleOrdinal(d3.schemeCategory10),
    xAxis = d3.axisTop(x).ticks(12),
    yAxis = d3.axisRight(y).ticks(12 * (height / width)),

    brushed = function () {
        var d0 = d3.event.selection.map(x.invert),
            d1 = d0.map(Math.round);

        if (d3.event.sourceEvent.type === "brush") {
            return;
        }

        if (d1[0] >= d1[1]) {
            d1[0] = Math.floor(d0[0]);
            d1[1] = d1[0] + 1;
        }

        d3.select(this).call(d3.event.target.move, d1.map(x));
    };

svg.selectAll("circle")
    .data(points)
    .enter()
    .append("circle")
    .attr("cx", function (d) {return x(d[0]);})
    .attr("cy", function (d) {return y(d[1]);})
    .attr("r", 2.5)
    .attr("fill", function (d) {return z(d[2]);});

svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0, " + (height - 10) + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(10, 0)")
    .call(yAxis);

svg.selectAll(".domain")
    .style("display", "none");

svg.append("g")
    .attr("class", "brush")
    .call(d3.brushX())
    .on("start brush", brushed);

}(d3));
Reply all
Reply to author
Forward
0 new messages