D3.js可交互绘制沙盒

D3 interactive drawing sandbox

d3, paint

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1319
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var svgElement = d3.select('svg#svg-canvas');
var reset = d3.select('#reset');
var mouseClickXY = {};

var line = d3.line()
    // curved line
    .curve(d3.curveBasis);

var svg = svgElement
    .call(
        // https://github.com/d3/d3-drag#drag
        d3.drag().on('start', dragstarted)
        .container(function() {
            console.log('drag.container');

return this;
        })
        // github.com/d3/d3-drag#drag_subject
        .subject(function() {
            console.log('drag.subject');

var p = [d3.event.x, d3.event.y];
            return [p, p];
        })
    );

function dragstarted() {
    console.log('dragstarted');

var d = d3.event.subject,
        // origin
        x0 = d3.event.x,
        y0 = d3.event.y,

active = svg.append("svg:path")
        .attr('marker-start', 'url("#marker-circle")')
        .attr('marker-end', 'url("#marker-arrow")')
        .attr('cursor', 'pointer')
        .attr('stroke-linecap', 'round')
        .attr('stroke-linejoin', 'round')
        .attr('class', '')
        .attr('id', 'arrow' + x0 + '-' + y0)
        .datum(d);

// console.log('x0: ' + x0);

// github.com/d3/d3-drag#event_on
    d3.event.on('drag', function() {
        // current position
        var x1 = d3.event.x,
            y1 = d3.event.y,
            // distance from origin
            dx = x1 - x0,
            dy = y1 - y0;

// if the distance of drag event is too large, make new origin
        if (dx * dx + dy * dy > 300) d.push([x0 = x1, y0 = y1])
            // smooth line, correct last point
        else d[d.length - 1] = [x1, y1];

active.attr("d", line);
    });
}

// Draw a SVG circle on click
function circle(x, y) {
    svgElement.append("svg:circle") // attach a circle
        .attr("cx", x) // position the x-center
        .attr("cy", y) // position the y-center
        .attr("r", 50)
        .attr('id', 'circle' + x + '-' + y)
        .attr('cursor', 'pointer')
        .attr('stroke', 'red')
        .attr('stroke-width', 4)
        .attr('fill', 'transparent');

//.call(dragCircle);
}

function unselectSelected() {
    // previously "selected" elements
    var selected = document.getElementsByClassName('selected');
    // unselect them
    for (var i = 0; i < selected.length; i++) {
        selected[i].classList.remove('selected');
    }
}

function removeContent() {
    d3.select('.selected').remove();
}

function insertText() {

var overlay = d3.select('body').append('div')
        .attr('class', 'overlay');

var textarea = overlay.append('textarea')
        .attr('id', 'commentary')
        .attr('maxLength', '200')
        .attr('name', '')
        .attr("style", 'left:' + mouseClickXY.x + 'px; top:' + mouseClickXY.y + 'px;')
        .attr('rows', '6')
        .attr('cols', '40');

var okButton = overlay.append('button')
        .attr('id', 'insert-text')
        .attr("style", 'left:' + mouseClickXY.x + 'px; top:' + (mouseClickXY.y + 80) + 'px;')
        .text('Insert text')
        .on('click', function() {

var textContent = document.getElementById('commentary').value;

console.log(textContent);

// create group for text and its background
            var textGroup = svgElement.append('g');

// create text
            var text = textGroup.append('text')
                .attr('id', 'text' + mouseClickXY.x + '-' + mouseClickXY.y)
                .attr('x', mouseClickXY.x)
                .attr('y', mouseClickXY.y)
                .attr('dy', '1')
                .text(textContent)
                // line wrap 
                // bl.ocks.org/mbostock/7555321
                .call(wrap, 200);

// SVG text background 
            // http://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
            var bbox = text.node().getBBox();
            var textPadding = 10;

// create background
            textGroup.insert('svg:rect', '#text' + mouseClickXY.x + '-' + mouseClickXY.y)
                .attr('x', bbox.x - textPadding)
                .attr('y', bbox.y - textPadding / 2)
                .attr('width', bbox.width + textPadding * 2)
                .attr('height', bbox.height + textPadding)
                .style('fill', '#fff')
                .style('fill-opacity', '.62')
                .style('stroke', '#666')
                .style('stroke-width', '1.5px');

// kill the text dialog
            overlay.remove();

});

}

// var circles = d3.selectAll('svg circle');
// var svgCircle = circles.call(d3.drag(dragCircle));

/* function dragCircle() {
	d3.event.on('dragstart', function(d) {
		console.log("Started moving item with data:", d);
	});
} */

svgElement.on('click', function() {

if (d3.select(this)) {
        // console.log(d3.select(this))
    }
    // https://github.com/d3/d3/wiki/Selections#d3_mouse
    var coords = d3.mouse(this);
    var x = coords[0], // Takes the pixel number to convert to number
        y = coords[1];

//var x = d3.event.x,
    //	y = d3.event.y;
    circle(x, y);

});

reset.on('click', function() {
    svgElement.selectAll("*:not(.do-not-remove)").remove();
});

//
// Radial menu
//
var radialMenu = document.getElementById('radial-menu');
var radialMenuItems;
var svgCanvas = document.getElementById('svg-canvas');

function setUpRadialMenuItems() {
    var radius = 55;
    radialMenuItems = document.getElementsByClassName('radial-menu-item');
    var radialMenuItemsLength = radialMenuItems.length;

for (var i = 0; i < radialMenuItemsLength; i++) {
        var radialMenuItem = radialMenuItems[i];

var x = ((radius * Math.cos(2 * Math.PI * i / radialMenuItemsLength)) + 54);
        var y = ((radius * Math.sin(2 * Math.PI * i / radialMenuItemsLength)) + 54);

var css = radialMenuItem.style;
        css.left = x + 'px';
        css.top = y + 'px';
    }
}
setUpRadialMenuItems();

// mouse click on clipping
svgCanvas.addEventListener('contextmenu', function(e) {
    e.preventDefault();

unselectSelected();

// clicked element
    var that = e.target;
    console.log(that.nodeName);
    // mark it as slected
    that.classList.add('selected');
    // get ID of the clicked element
    var id = that.getAttribute('id');

if (that.nodeName === 'image') {
        document.getElementById('remove-content').style.visibility = 'hidden';
    } else {
        document.getElementById('remove-content').style.visibility = 'visible';
    }

// get position of the click event
    var x = e.pageX;
    var y = e.pageY;
    mouseClickXY = {
        x: e.pageX,
        y: e.pageY
    }

// set position of radial menu
    radialMenu.style.top = y - 25 + 'px';
    radialMenu.style.left = x - 25 + 'px';
    // show radial menu
    radialMenu.classList.add('visible');

// store selected clipping as data-attribute
    radialMenu.setAttribute('data-clipping', id);
}, true);

// mouse leaves radial menu
radialMenu.addEventListener('mouseleave', function(event) {
    setTimeout(function() {
        event.target.classList.remove('visible');

unselectSelected();

}, 400);
});

// mouse click on radial menu item
for (var i = 0; i < radialMenuItems.length; i++) {
    radialMenuItems[i].addEventListener('click', function(e) {
        e.preventDefault();

radialMenu.classList.remove('visible');

if (e.target.id === 'remove-content') {
            removeContent();
            console.log('remove-content');
        }

if (e.target.id === 'create-text') {
            insertText();
            console.log('create-text');
        }

});
}

编译

CSS

HTML

<button id="reset">Reset</button>
<div id="desc">click = circle || drag = arrow || right click = menu | ( X ) = remove | ( T ) = add text</div>

</svg>
    </div>
</div>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-drag.v1.min.js"></script>
<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script src="https://d3js.org/d3-shape.v1.min.js"></script>

<div id="radial-menu" class="radial-menu" data-clipping="">
    <div class="radial-menu-wrapper">
        
        
        <div class="radial-menu-item" id="create-text">T</div>
        
        
        <div class="radial-menu-item" id="remove-content">X</div>
    </div>
</div>

D3 interactive drawing sandbox

d3, paint

编辑器支持Emmet

快捷键

D3 interactive drawing sandbox

d3, paint

HTML5 D3.js 树形结构动画示范（可绘制脑图）

使用D3.js绘制的Python2014大会主题旭日图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：