我使用d3.js创建了x,y,z平面,并希望通过初始方向移动每个轴。例如:x轴-水平方向,y轴-垂直方向,z轴-给定方向。我可以修改代码来水平移动x轴,垂直移动y轴。但是我不能在另一个(z)轴上这样做。我需要更改代码以通过初始方向移动z轴。
下面是我的d3.js代码。完整的代码在这里,x,y,z plane
var width = 600,
height = 600,
activeClassName = 'active-d3-item';
var svg = d3.select('.plane').append('svg');
svg.attr('width', width);
svg.attr('height', height);
//The data for our lines and endpoints
var data = [
{
'x1': 100,
'y1': 300,
'x2': 100,
'y2': 50
},
{
'x1': 100,
'y1': 300,
'x2': 300,
'y2': 300
},
{
'x1': 100,
'y1': 300,
'x2': 39,
'y2': 239
}
];
// Generating the svg lines attributes
var lineAttributes = {
'x1': function(d) {
return d.x1;
},
'y1': function(d) {
return d.y1;
},
'x2': function(d) {
return d.x2;
},
'y2': function(d) {
return d.y2;
}
};
// Pointer to the d3 lines
var lines = svg
.selectAll('line')
.data(data)
.enter()
.append('line')
.attr(lineAttributes);
var topEndPoints = data.map(function(line, i) {
return {
'x': line.x1,
'y': line.y1,
'marker': 'marker-start',
'lineIndex': i
};
});
var bottomEndPoints = data.map(function(line, i) {
return {
'x': line.x2,
'y': line.y2,
'marker': 'marker-end',
'lineIndex': i
};
});
var endPointsData = bottomEndPoints;
// Generating the svg circle attributes
var endPointsAttributtes = {
'r': 7,
'cx': function(d) {
return d.x;
},
'cy': function(d) {
return d.y;
}
};
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on('dragstart', dragstarted)
.on('drag', dragged)
.on('dragend', dragended);
// Pointer to d3 circles
var endPoints = svg
.selectAll('circle')
.data(endPointsData)
.enter()
.append('circle')
.attr(endPointsAttributtes)
.call(drag);
function dragstarted() {
d3.select(this).classed(activeClassName, true);
}
function dragged(d, i) {
var marker = d3.select(this);
// Update the marker properties
if(d.lineIndex === 0) {
marker.attr('cy', d.y = d3.event.y); //Drag line 1 only through y axis.
} else if(d.lineIndex === 1) {
marker.attr('cx', d.x = d3.event.x); //Drag line 2 only through x axis.
} else if(d.lineIndex === 2) {
marker.attr('cx', d.x = d3.event.x).attr('cy', d.y = d3.event.y);
}
// Update the line properties
lines
.filter(function(lineData, lineIndex) {
return lineIndex === d.lineIndex;
}).attr('x1', function(lineData) {
return d.marker === 'marker-start' ? lineData.x1 = d.x : lineData.x1;
}).attr('y1', function(lineData) {
return d.marker === 'marker-start' ? lineData.y1 = d.y : lineData.y1;
})
.attr('x2', function(lineData) {
return d.marker === 'marker-end' ? lineData.x2 = d.x : lineData.x2;
}).attr('y2', function(lineData) {
return d.marker === 'marker-end' ? lineData.y2 = d.y : lineData.y2;
});
}
function dragended() {
d3.select(this).classed(activeClassName, false);
}
我只想通过初始方向移动z轴。
https://stackoverflow.com/questions/56348317
复制相似问题