我想要做的是创建一个带有端口和路径的自定义类的元素,这样我就可以为ports添加一个带有自定义路径和我自己的标记的元素.这样当我创建一个元素时,我将为它的形状传递动态路径就像路径类的元素行为一样,并且我也从PortsModelInterface扩展,我也将拥有自己的端口标记.这整个工作就是让svg可以扩展为zomming.以前我使用html自定义元素与我的自定义端口工作正常,但自定义元素的HTML不缩放缩放
var graph = new joint.dia.
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 800,
height: 600,
gridSize: 1,
model: graph,
snapLinks: true,
embeddingMode: true
});
joint.shapes.custom1={};
joint.shapes.custom1.Element = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable"><g class="scalable"><rect class = "myrect"/></g><g class="inPorts"/><g class="outPorts"/></g>',
portMarkup: '<g class="port<%= id %>"><circle class="port-body"/></g>',
defaults: joint.util.deepSupplement({
type: 'html.Element',
size: { width: 200, height: 110 },
inPorts: [],
outPorts: [],
attrs: {
'.': { magnet: true},
rect: {
stroke: 'none', 'fill-opacity': 0, width: 300, height: 210,
},
circle: …Run Code Online (Sandbox Code Playgroud) 我正在两篇论文之间实现拖放.但是由于我的html体内有两篇论文,因此我被困在拖动元素与光标位置的偏移同步中.我对css的经验很少,可能导致定位问题元素.
使用案例: -
用户点击纸张2中的元素并开始拖动并转到纸张1.在指针向上,将该元素的克隆添加到纸张1上的光标位置1.
我的处理方法是: -
当用户点击mousedown时
1.动态创建一个div
2.创建第三篇论文,在新div中称之为"flypaper"制作要克隆的元素的副本,并将其添加到"flypaper"中
3.创建一个mousemove监听器,用鼠标移动包含"flypaper"的div
4.添加一个mouseup事件,当用户释放按钮时,该事件将元素的克隆添加到"paper2".
5.清理"flypaper"div和事件.
<body>
<div id="paper" class="paper" style="border-style: solid;border-width: 5px;width:600px"></div>
<div id="paper2" class="paper" style="border-style: solid;border-width: 5px;width:600px;display:inline-block" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', …Run Code Online (Sandbox Code Playgroud) 我正在制作热图。在其中我根据数据以编程方式制作热图的矩形(宽度,高度)。
我想添加用于缩放 X 轴(时间范围)、Y 轴(距离范围)的滑块。我尝试了 d3 缩放选项,效果很好。但是比例尺(x 轴,y 轴)与图形的矩形不成比例。就像一个矩形在 10,20 英里 y 轴比例之间。它在缩放方面走得更远超过 20 英里。
然后我在 svg 上尝试了 viewbox。有用 。比例保持在与图形精确的比例。
我想在缩放时保持比例和图形的比例,但不想增加比例标签的大小,因为它会使图形变得丑陋。
这是我最初如何制作图表的代码片段
d3.json('dateWiseNewDataRight.json',function(err,right_dat){
// console.log(right_dat);
var dateGroups=_.groupBy(right_dat, "DATE");
var data = [];
var x= 0,y=0;
var tlength=0;
var totalDates=Object.keys(dateGroups);
var graphWidth=(total_width/totalDates.length)-6;
for(var key in dateGroups){
tlength=0;
data = [];
y=0;
var segmentMiles=0;
var currentGraphData=dateGroups[key];
var road=currentGraphData[0]['ROAD'];
for(var i = 0; i < currentGraphData.length-1; i++) {
tlength+=currentGraphData[i].MILES;
}
for (var i = 0; i < currentGraphData.length-1; i++) {
var height=0; …Run Code Online (Sandbox Code Playgroud) 我在GitHub上有两个帐户.我想将我的一个存储库从一个帐户转移到另一个帐户.我不想分叉存储库,而是完全转移其所有权.我怎样才能做到这一点?
我的应用程序位于节点,主干网中,可视化数据.现在在我的情况下数据是分层的形式,所以我做了我的研发,但找不到任何有用的工具.什么是最好的工具是我可以集成在我的应用程序中的库,以有用的形式可视化分层数据,并可以集成在我的应用程序中容易??
我检查了这些链接
http://gephi.org/features/
http://wiki.pentaho.com/display/COM/Treemap
http://thewhyaxis.info/bubble-tree/
Run Code Online (Sandbox Code Playgroud) 我在java工作,我必须评估作为String给出的数学表达式.例如:
"5*8-9/7+5-8"
会导致
35.71.
我试过"java eval库",但没有找到帮助.请告诉我如何解决这类问题.我可以使用数据结构堆栈或队列来评估这些表达式,但我必须考虑运算符优先级,因为乘法是在减法,加法之前完成的.哪种数据结构最适合这种情况,最好记住时间复杂性.
javascript ×4
svg ×3
backbone.js ×2
jointjs ×2
css ×1
d3.js ×1
git ×1
github ×1
java ×1
node.js ×1