d3.js：如何獲取拖動事件信息

Question

我正在使用此示例來實現圖形上的拖動。

最相關的部分：

/// 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的 function 期待一個事件。 但是傳入的dragged只是我的線的坐標，與事件無關。 當然，它沒有屬性x ，所以代碼不起作用。

事件 object 應該如下所示：

我無法弄清楚我在做什么與示例不同。

我的完整代碼：

/// 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是綁定數據， i是索引， nodes是選擇中的節點組。 所以你應該能夠使用：

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

這種變化是 d3v6 中最顯着的變化。