我正在使用 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 在某种程度上是无效的;我能够很好地绘制线条,问题在于拖动。
最佳答案
您的代码基于的示例是 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 中最显着的变化。
关于javascript - d3.js:如何获取拖动的事件信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65165077/