【发布时间】：2019-01-02 07:37:39
【问题描述】：
我正在开发一个合并 Angular 和 D3 (v3) 的包，特别是尝试将 D3 的拖动功能合并到包中。我非常接近成功，但是当我的绘图第一次渲染时，我无法拖动元素（在本例中为矩形），除非我使用光标选择 x 轴上的文本。文本突出显示后，用户可以拖动矩形，该功能似乎可以正常工作，但我真的很想修复最初的错误。
我已经在Github.io project found here 中复制了这个问题。我在库 ivml.0.0.0（包括 in the repo）的第 903-966 行中定义了 d3 的拖动行为，我将在下面包括：
if (Bars.events.dragE) {
// Note: xs(0) refers to pixel value at 0 on the x-scale. Must be reset for generalizability
// function returns width (in pixels) of bar. Used to ensure drag doesn't exceed plot area
function returnw(d, i){
if (values_function(d, i) <= 0) {
Bars.elements.barController.offset(position_function(d, i), xs(0) - xs(values_function(d, i)), values_function(d, i));
return xs(0) - xs(values_function(d, i));
}
else {
Bars.elements.barController.offset(position_function(d, i), xs(values_function(d, i)) - xs(0), values_function(d, i))
return Math.abs(xs(0)-xs(values_function(d, i)))
}
}
var drag = d3.behavior.drag()
.on('dragstart', draginit)
.on('drag', dragmove)
.on('dragend', dragfin);
function draginit(d){
d3.event.sourceEvent.stopPropagation();
// replace fill color with variable for user input function
Bars.events.dragE(d, i, d3.select(this).attr('style', 'fill: yellow; stroke: black; stroke-width: 3px;'))
}
function dragmove(d){
var svgwidth = Bars.elements.chartController.plotObject.attributes.width //margin of plotObject
var svginterval = svgwidth/(Bars.elements.chartController.plotObject.attributes.xmax-Bars.elements.chartController.plotObject.attributes.xmin) //number of pixels between whole numbers in coordinate plot
Bars.events.dragE(d, i,
d3.select(this)
.attr("x", function(d, i){
if (d3.event.x < 0) {return 0}
else if (d3.event.x + returnw(d,i) > svgwidth){ return (svgwidth - returnw(d,i))}
else {return xs(Math.floor(d3.event.x/svginterval)) } })); //this function ensures value will be a whole number
var valuechange = d3.event.x < 0 ? 0 : (d3.event.x + returnw(d,i) > svgwidth ? svgwidth - returnw(d,i) : d3.event.x);
console.log("Start value changed to: ", Math.floor(valuechange/svginterval));
}
function dragfin(d){
Bars.events.dragE(d, i, d3.select(this).attr('style', 'stroke: black; stroke-width: 0px;')
.attr('fill', Bars.attributes.fill))
}
rects.attr("cursor", "ew-resize")
.on('dragstart', function(d, i){
Bars.events.dragE(d, i, d3.select(this).call(drag))
})
.on('drag', function (d, i) {
window.dragThis = this;
Bars.events.dragE(d, i,
d3.select(this).call(drag))
})
.on("dragend", function(d, i){
Bars.events.dragE(d, i, d3.select(this).call(drag))
})
}
我对 Angular 和 Javascript/D3 还是有点陌生，所以我可能会遗漏一些非常基本的东西，但任何见解都将不胜感激！
【问题讨论】：
标签： javascript angularjs d3.js