Skip to content

Instantly share code, notes, and snippets.

@roundrobin
Created June 23, 2012 06:34
Show Gist options
  • Save roundrobin/2977140 to your computer and use it in GitHub Desktop.
Save roundrobin/2977140 to your computer and use it in GitHub Desktop.
just another inlet to tributary
var pathWay = [];
//DONT REMOVE LINE BELOW
var lineWidth = 1414
var lineStart = 80
var lineDistance = 160
var d = []
var hinweg = []
var rueck = []
var path = g.append('path')
.attr('stroke','blue')
.attr('stroke-width',5)
.attr('fill','none')
var curve = '';
d3.select('svg').on('click',function(){
var point1 = {x:d3.event.pageX ,y:d3.event.pageY-75}
d.push(point1)
})
// -------- Adding Helper Lines -----------------------
var y1 = lineStart
var xheight = createLine(1,lineWidth,y1,y1)
var y2 = y1+ lineDistance
var baseline = createLine(1,lineWidth,y2,y2)
var y3 = y2 + lineDistance
var descentline = createLine(1,lineWidth,y3,y3)
function createLine(x,x1,y,y1){
g.append('line')
.attr("x1",x)
.attr("y1",y)
.attr("x2",x1)
.attr("y2",y1)
.style("stroke-width", 3)
.style("stroke", "black")
}
var defs = d3.select('svg').append('defs')
var pattern = defs.append('pattern')
.attr('id','pattern1')
.attr('pattermTransform','')
.attr('height',40)
.attr('width',40)
.attr('patternUnits','userSpaceOnUse')
var line = pattern.append('line')
.attr('x1',0)
.attr('x2',40)
.attr('y1',0)
.attr('y2',0)
.attr('fill',"#4D8891")
.style("stroke-width", 2)
.style("stroke", "steelblue")
var line = pattern.append('line')
.attr('x1',0)
.attr('x2',0)
.attr('y1',0)
.attr('y2',40)
.attr('fill',"#4D8891")
.style("stroke-width", 2)
.style("stroke", "steelblue")
d3.select('svg').append('rect')
.attr('height',779)
.attr('width',1442)
.attr('fill','url(#pattern1)')
//---------------------- Button- and Add-to-editor-logic ----------------
var addText = function(){
var text = d3.select('#pathWay')
var textValue = tribView.code_editor.getLine(0);
var search = /var pathWay = \[(.*)\]/;
var result = search.exec(textValue);
if(textValue == 'var pathWay = [];')
add ='[1,2]';
else
add = ',[1,2]';
var modify = result[1]+add;
var finalString = 'var pathWay = ['+(modify)+'];';
//console.log('String',finalString);
var test = text.text(finalString);
test = test.text();
tribView.code_editor.setLine(0,test);
}
var button1 = createButton('Add path', addText)
.attr('transform','translate('+[32,9]+')')
var removeText = function(elem){
var text = tribView.code_editor.setLine(0,'var pathWay = []; ')
}
var button2 = createButton('Remove path', removeText)
.attr('transform','translate('+[126,9]+')')
function createButton(name,callback){
var buttonGroup = g.append('g')
.on('click', function(d,i){
callback(this)
})
.on('mousedown',function(){
d3.select(this).select('#buttonBG')
.attr('fill','url(#g3201)')
.attr('stroke-width',3)
})
.on('mouseover',function(){
d3.select(this).select('#buttonBG')
.attr('fill','url(#g3203)')
.attr('stroke-width',3)
.attr('stroke','url(#g3204)')
})
.on('mouseout',function(){
d3.select(this).select('#buttonBG')
.attr('fill','url(#g3203)')
.attr('stroke','url(#g3202)')
.attr('stroke-width',3)
})
var rect = buttonGroup.append('rect')
.attr('width',122)
.attr('height',45)
.attr('fill',"#922F2F")
.attr('rx',10)
.attr('ry',10)
.attr('id','buttonBG')
.attr('height',45)
.attr('fill','url(#g3203)')
.attr('stroke','url(#g3202)')
.attr('stroke-width',3)
var text = buttonGroup.append('text')
.attr('id','pathWay')
.attr('font-size',10)
.attr('fill',"#FFFFFF")
.style('text-shadow','1px 1px 2px'+"#000000")
.text(name)
.attr('transform','translate('+[10,rect.attr('width')/4.5]+')')
var textLength = text.node().getBBox().width;
rect.attr('width',textLength+20)
return buttonGroup;
}
// -------------------------------------
var gradient = defs.append('linearGradient')
.attr('id','g3201')
.attr('gradientUnits','userSpaceOnUse')
.attr('x1','0%')
.attr('x2','0%')
.attr('y1','0%')
.attr('y2',46)
gradient.append('stop')
.attr('stop-color',"#363636")
.attr('offset','0')
gradient.append('stop')
.attr('stop-color',"#5B6B65")
.attr('offset','1')
var gradient = defs.append('linearGradient')
.attr('id','g3202')
.attr('gradientUnits','userSpaceOnUse')
.attr('x1','0%')
.attr('x2','0%')
.attr('y1','0%')
.attr('y2',46)
gradient.append('stop')
.attr('stop-color',"#5B6B65")
.attr('offset','0')
gradient.append('stop')
.attr('stop-color',"#363636")
.attr('offset','1')
var gradient = defs.append('linearGradient')
.attr('id','g3203')
.attr('gradientUnits','userSpaceOnUse')
.attr('x1','0%')
.attr('x2','0%')
.attr('y1','0%')
.attr('y2',46)
gradient.append('stop')
.attr('stop-color',"#FFF368")
.attr('offset','0')
gradient.append('stop')
.attr('stop-color',"#418041")
.attr('offset','1')
var gradient = defs.append('linearGradient')
.attr('id','g3204')
.attr('gradientUnits','userSpaceOnUse')
.attr('x1','0%')
.attr('x2','0%')
.attr('y1','0%')
.attr('y2',46)
gradient.append('stop')
.attr('stop-color',"#0085FF")
.attr('offset','0')
gradient.append('stop')
.attr('stop-color',"#1073A2")
.attr('offset','1')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment