javascript - D3 放大画笔范围

我正在开发一个应该使用给定数据创建散点图的网络工具。由于我对任何可视化都不熟悉(也不是 JavaScript 专家)，我决定使用 D3。

按照教程，观察示例和尝试的东西，我得到了一个带有画笔选择的散点图(还没有做任何事情)。
现在，由于目标是绘制基因，它们中的很多在 x 和 y 坐标方面将非常接近。所以我想实现一些 like this ，但在 x 和 y 方向。基本上放大拉丝部分。

到目前为止，我无法创建这种行为，此时我的轴确实发生了变化，但不再显示值并且没有任何缩放发生。您可以在 my toy subdomain 上实时看到它。我不知道哪里出了问题，所以任何帮助表示赞赏。

玩具域上使用的javascript:

// General variables

var svg, width, height;
var padding = 30;

var dataset = [
              [ 5,     20 ],
              [ 480,   90 ],
              [ 250,   50 ],
              [ 100,   33 ],
              [ 330,   95 ],
              [ 410,   12 ],
              [ 475,   44 ],
              [ 25,    67 ],
              [ 85,    21 ],
              [ 220,   88 ]
          ];

function drawGraph(){
    scatterplot_area_size = $("#scatterplot").width();
    width = scatterplot_area_size;
    height = scatterplot_area_size * 0.75;

    console.log(width);

    // Retrieve the interval of the x and y data
    var maxX = d3.max(dataset, function(d) {
        return d[0];  //References first value in each sub-array
    });

    var minX = d3.min(dataset, function(d) {
        return d[0];  //References first value in each sub-array
    });

    var maxY = d3.max(dataset, function(d) {
        return d[1];  //References second value in each sub-array
    });

    var minY = d3.min(dataset, function(d) {
        return d[1];  //References second value in each sub-array
    });

    // Create a (square) scatterplot area in the div with id scatterplot
    // which spans the entire div in width
    svg = d3.select("#scatterplot")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

    // plot all points
    var points = svg.append("g")
        .attr("class", "point")
        .selectAll("point")
        .data(dataset)
        .enter()
        .append("circle");


    console.log(minX + " " + minY);

    // Create x and y scales
    var x = d3.scale.linear()
                     .domain([minX, maxX])
                     .range([padding, (width-padding)]);

    var y = d3.scale.linear()
                     .domain([minY, maxY])
                     .range([(height-padding), padding]); // Reverse the scale to let high values show at the top and low values at the bottom

    // Set the x and y positions as well as the radius (hard coded 5)
    points.attr("cx", function(d) {
        return x(d[0]);
    })
   .attr("cy", function(d) {
        return y(d[1]);
    })
    .attr("r", 5);

    // Create the x and y axes
    var xAxis = d3.svg.axis()
                  .scale(x)
                  .ticks(10)
                  .orient("bottom");

    var yAxis = d3.svg.axis()
                  .scale(y)
                  .ticks(10)
                  .orient("left");

    // Add the axes to the scatterplot
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height-padding) + ")")
        .call(xAxis);

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

    // Allow for brushing (selection of points)
    var brush = d3.svg.brush()
        .x(x)
        .y(y)
        .on("brush", brushmove)
        .on("brushend", brushend);

    svg.append("g")
        .attr("class", "brush")
        .call(brush)
        .selectAll('rect')
        .attr('height', height);

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

    function brushend() {
        x.domain(brush.extent());
        y.domain(brush.extent());

        transition_data();
        reset_axis();

        points.classed("selected", false);
        d3.select(".brush").call(brush.clear());
    }

    function transition_data() {
        console.log("transistion data called");
        d3.selectAll("point")
        .transition()
        .duration(500)
        .attr("cx", function(d) { console.log(d[0]); return x(d[0]); })
        .attr("cy", function(d) { return y(d[1]); });
    }

    function reset_axis() {
        svg.transition().duration(500)
        .select(".x.axis")
        .call(xAxis);

        svg.transition().duration(500)
        .select(".y.axis")
        .call(yAxis);
    }
}

// Wait until the document is loaded, then draw the graph.
$( document ).ready(function() {
    drawGraph();
});

// If the window is resized, redraw graph to make it fit again.
$( window ).resize(function() {
    if(typeof svg != 'undefined'){
        $("#scatterplot").empty();
    }
    drawGraph();
});

最佳答案

您的代码中有两个错误:

在您的函数 brushend() 中，您在两种情况下都使用 brush.extent() 的返回值来设置比例的域。但是请注意，画笔返回的范围是一个二维数组，如 [[xMin,yMin],[xMax,yMax]] 。您必须使用设置您的域

var extent = brush.extent();
x.domain([extent[0][0],extent[1][0]]);  // x.domain([xMin,xMax])
y.domain([extent[0][1],extent[1][1]]);  // y.domain([yMin,yMax])

这些调整将使您的轴正确缩放，而点仍然固定。

您正在使用 d3.selectAll("point") 插入和操作数据点，svg:point 将它们称为 d3.selectAll("point") 类型。但是，没有这种类型的 svg 元素。尽管您对 var points 的调用仍然有效，但它始终会产生一个空选择，因为没有要选择的元素。出于这个原因，您在设置 svg 时第一次调用该函数确实有效，因为它会将所有数据绑定(bind)到输入选择并给出所需的结果。为了正确起见，您应该将其更正为

// plot all points
var points = svg.append("g")
    .attr("class", "point")
    // .selectAll("point")
    .selectAll("circle")    // <-- This will work
    .data(dataset)
    .enter()
    .append("circle");

在设置比例域后尝试更新您的点时，错误代码将不起作用，因为在这种情况下，空选择是没有意义的，并且不会对任何元素产生影响。由于在上面引用的语句中，您已经在 ojit_code 中存储了对您选择的引用，因此无需再次选择它们。您可以按如下方式重写您的更新:

function transition_data() {
    // d3.selectAll("point")   // Instead of this...
    points                     // <-- ...use the reference to your selection
        .transition()
        .duration(500)
        .attr("cx", function(d) { return x(d[0]); })
        .attr("cy", function(d) { return y(d[1]); });
}

我整理了一个有效的 JSFiddle 来演示解决方案。

关于javascript - D3 放大画笔范围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30005145/