javascript - d3.js:如何获取拖动的事件信息

Question

我正在使用 this example在图形上实现拖动。

最相关的部分:

/// IMPLEMENT DRAG BEHAVIOR
drag = d3.drag().on("drag", dragged)
function dragged(event,d) {
        d3.select(this).attr("transform", 'translate(' + event.x + ',' + 0 + ')')
    }
for (line of quantile_horizontal_lines) {
    line.call(drag)
}

dragged 函数需要一个事件。但是传递给 dragged 的对象只是我的线的坐标，与事件无关。当然，它没有属性x，所以代码不起作用。

一个事件对象应该是这样的:

我不知道我在做什么与示例不同。

我的完整代码:

/// BASIC LINE GRAPH SETUP
// 2. Use the margin convention practice
var margin = {top: 50, right: 50, bottom: 50, left: 50}
  , width = window.innerWidth - margin.left - margin.right // Use the window's width
  , height = window.innerHeight - margin.top - margin.bottom; // Use the window's height

// 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number
var dataset = data

// The number of datapoints
var n = data.length

// 5. X scale will use the index of our data
var xScale = d3.scaleLinear()
    .domain([metadata.xmin, metadata.xmax]) // input
    .range([0, width]); // output

// 6. Y scale will use the randomly generate number
var yScale = d3.scaleLinear()
    .domain([metadata.ymin, metadata.ymax]) // input
    .range([height, 0]); // output

// 7. d3's line generator
var line = d3.line()
    .x(function(d) { return xScale(d.x); }) // set the x values for the line generator
    .y(function(d) { return yScale(d.y); }) // set the y values for the line generator

// 1. Add the SVG to the graph div and employ #2
var svg = d3.select("#graph").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// 3. Call the x axis in a group tag
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

// 4. Call the y axis in a group tag
svg.append("g")
    .attr("class", "y axis")
    .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator
plane = svg.append("g").attr('class','plane')

plane.append("path")
    .datum(dataset) // 10. Binds data to the line
    .attr("class", "line") // Assign a class for styling
    .attr("d", line); // 11. Calls the line generator

d3.select('.line') // move this to a CSS file later
    .attr('fill','none')
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")


/// ADD HORIZONTAL/VERTICAL LINES
plane.on('click',onclick)

onclick = function (event){
    x = xScale.invert(event.layerX - margin.left);
    y = yScale.invert(event.layerY - margin.right);
    console.log(x,y)
}

quantile_horizontal_lines = new Array()

function drawQuantileLines(quantiles) {
    console.log("running drawQuantileLines")
    for (let i = 0; i < quantiles.length; i++) {
        quantile = quantiles[i]
        quantile_horizontal_line_0 = {'x': quantile.x, 'y': metadata.ymin}
        quantile_horizontal_line_1 = {'x': quantile.x, 'y': quantile.y}

        quantile_horizontal_lines.push(
            plane.append("path")
                .datum([quantile_horizontal_line_0, quantile_horizontal_line_1])
                .attr('d', line)
                .attr('class', 'line')
                .attr('stroke', 'red'))
    }
}

drawQuantileLines(quantiles)


/// IMPLEMENT DRAG BEHAVIOR
drag = d3.drag().on("drag", dragged)
function dragged(event,d) {
        d3.select(this).attr("transform", 'translate(' + event.x + ',' + 0 + ')')
    }
for (line of quantile_horizontal_lines) {
    line.call(drag)
}

data、metadata 和 quantiles 是使用 json.dumps() 从 Python 生成的 JSON 对象。我怀疑 JSON 在某种程度上是无效的；我能够很好地绘制线条，问题在于拖动。

Answer 1

您的代码基于的示例是 d3v6。规范示例通常会随着每个版本进行相当一致的更新。您正在使用 d3v4。

d3v6 之前的版本对传递给 .on() 的函数使用不同的签名。在 d3v6 中，函数采用 function(event,d) 的形式，在此之前，这些函数采用以下形式:

function(d,i,nodes) {
   console.log(d3.event) // event information
}

其中d是绑定(bind)数据，i是索引，nodes是选择中的节点组。所以你应该能够使用:

function dragged(d) {
    d3.select(this).attr("transform", 'translate(' + d3.event.x + ',' + 0 + ')')
}

这个变化是 d3v6 中最显着的变化。