D3.js 铅笔状功能
我一直在寻找使用D3和手绘铅笔的方法。这是可行的吗？我查看了mbostock网站上的不同示例，但没有找到任何允许您在可缩放区域内手动绘制的内容。这可能可以开始了……D3.js 铅笔状功能,d3.js,D3.js,我一直在寻找使用D3和手绘铅笔的方法。这是可行的吗？我查看了mbostock网站上的不同示例，但没有找到任何允许您在可缩放区域内手动绘制的内容。这可能可以开始了…… （这是一种经过修改的粒子模式，重力、电荷和摩擦力设置为零） ；（功能（）{ var w=900，h=400，节点=[]，触摸， svg=d3.选择（“vizcontainer”）.追加（“svg”） .attr（“宽度”，w） .attr（“高度”，h）， force=d3.layout.force（） .尺寸（[w，h]） .重
（这是一种经过修改的粒子模式，重力、电荷和摩擦力设置为零）
；（功能（）{
var w=900，h=400，节点=[]，触摸，
svg=d3.选择（“vizcontainer”）.追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h），
force=d3.layout.force（）
.尺寸（[w，h]）
.重力（0）
.收费（0）
.摩擦力（0），
outputDiv=d3。选择（“主体”）。插入（“div”，“vizcontainer”）.attr（“id”，“output”）.attr（“类”，“输出”），
touchesDiv=d3.选择（“主体”）.插入（“div”，“输出”）.attr（“id”，“touches”）
.style（“右边距”、“10px”）.attr（“类”、“输出”）；
强制开启（“勾选”），功能（e）{
outputDiv.text（“alpha:\t”+d3.format（“.3f”）（force.alpha（））
+“\t节点：\t”+force.nodes（）.length）
svg.selectAll（“圆圈”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
});
svg.on（“mousemove”，onMove）；
svg.on（“touchmove”，onTouch）；
svg.on（“touchstart”，onTouch）；
函数onMove（）{
updateMethod.call（此）
}
函数onTouch（）{
d3.event.preventDefault（）；
d3.event.stopPropagation（）；
updateMethod.call（此）
}
函数惯用（）{
力节点（节点）；
返回函数（）{
var pointM=d3.鼠标（此），pointT=d3.触摸（此），
point=pointT.length？pointT[0]：pointM，
节点={x:点[0]，y:点[1]}；
nodes.push（节点）；
svg.selectAll（“圆圈”）
.数据（节点）
.enter（）.append（“圆”）
.attr（“r”，3）
.每个（（函数（n）{
返回函数（d，i）{
var i=节点。indexOf（n）；
节点.拼接（i，1）
}
})（节点））；
force.start（）；
}
}/*惯用*/
updateMethod=惯用（）；
})（）body，html{
宽度：100%；
身高：100%；
}
#维兹容器{
宽度：100%；
身高：100%；
}
svg{
轮廓：1px纯红；
宽度：100%；
身高：100%；
}
.产出{
指针事件：无；
显示：内联块；
z指数：1；
利润率：10px；
}我喜欢@coolblue的解决方案，但这里有一个替代方案。它使用了一个路径元素，让人感觉像在画画：
var svg=d3.select（'body'）
.append（'svg'）
.attr（'宽度'，1000）
.attr（'height'，1000）；
var color=d3.scale.category20（）；
var line=d3.svg.line（）
.插入（“依据”）；
var drawObj={
伊斯敦：错，
数据点：[]，
currentPath:null，
颜色：0
}
on（“mousedown”，function（））{
drawObj.isDown=真；
});
on（“mousemove”，function（））{
如果（drawObj.isDown）{
drawObj.dataPoints.push(
[d3.event.x，d3.event.y]
);
如果（！drawObj.currentPath）{
drawObj.currentPath=svg.append（“路径”）
.attr（“类”、“当前路径”）
.style（“笔划宽度”，1）
.样式（“笔划”、颜色（drawObj.颜色））
.样式（“填充”、“无”）；
}
drawObj.currentPath
.基准面（图纸对象数据点）
.attr（“d”，行）；
}
});
on（“mouseup”，function（））{
drawObj.isDown=假；
drawObj.currentPath.attr（“类”、“旧路径”）；
drawObj.dataPoints=[]；
drawObj.currentPath=null；
如果（++drawObj.color>19）{
drawObj.color=0；
}
})
d3