个人中心
gpt4 book ai didi

d3.js - 如何在d3 js中调整矩形的大小

转载 作者：行者123 更新时间：2023-12-02 08:27:06 29 4
gpt4 key购买 nike

现在我可以调整圆圈的大小。我使用 g.append('svg:rect') 创建了一个矩形，但我不确定如何在 d3 中调整矩形的大小

这是我试过的:

var boxWidth = 1300;
var boxHeight = 600;

var box = d3.select('body')
        .append('svg')
        .attr('class', 'box')
        .attr('width', boxWidth)
        .attr('height', boxHeight);

var drag = d3.behavior.drag()
        .on('drag', function () {
            g.selectAll('*')
                    .attr('cx', d3.event.x)
                    .attr('cy', d3.event.y);
        });

var resize = d3.behavior.drag()
        .on('drag', function () {
            g.selectAll('.resizingContainer')
                    .attr('r', function (c) {
                        return Math.pow(Math.pow(this.attributes.cx.value - d3.event.x, 2) + Math.pow(this.attributes.cy.value - d3.event.y, 2), 0.5) + 6;
                    });
            g.selectAll('.draggableCircle')
                    .attr('r', function (c) {
                        return Math.pow(Math.pow(this.attributes.cx.value - d3.event.x, 2) + Math.pow(this.attributes.cy.value - d3.event.y, 2), 0.5);
                    });
        });

var g = box.selectAll('.draggableGroup')
        .data([{
                x: 65,
                y: 55,
                r: 25
            }])
        .enter()
        .append('g');

g.append('svg:circle')
        .attr('class', 'resizingContainer')
        .attr('cx', function (d) {
            return d.x;
        })
        .attr('cy', function (d) {
            return d.y;
        })
        .attr('r', function (d) {
            return d.r + 6;
        })
        .style('fill', '#999')
        .call(resize);

g.append('svg:circle')
        .attr('class', 'draggableCircle')
        .attr('cx', function (d) {
            return d.x;
        })
        .attr('cy', function (d) {
            return d.y;
        })
        .attr('r', function (d) {
            return d.r;
        })
        .call(drag)
        .style('fill', 'black');

g.append('svg:rect')
        .attr("width", 70)
        .attr("height", 70)
        .attr("x", 30)
        .attr("y", 130)
        .attr("rx", 6)
        .attr("ry", 6)
        .style("fill", d3.scale.category20c());

html:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
        <script src='d3.js' charset='utf-8'></script>

        <style>
            .box {
                border: 1px black;
                border-radius: 10px;
            }
            .resizingContainer {
                cursor: nesw-resize;
            }
        </style>
    </head>
    <body>
        <script src='drag.js'></script>
        <div id="checks">
        X-axis:<input type="checkbox" id="xChecked" checked/>
        Y-axis:<input type="checkbox" id="yChecked" checked/>
    </div>
    </body>
</html>

这是现场演示:https://jsbin.com/dejewumali/edit?html,js,output

最佳答案

为您的代码添加了矩形调整大小。请注意，您需要使用右下角来调整大小(这是将调整大小添加到最简单的角:-))

var boxWidth = 1300;
var boxHeight = 600;

var box =
    d3.select('body')
        .append('svg')
        .attr('class', 'box')
        .attr('width', boxWidth)
        .attr('height', boxHeight);

var drag = d3.behavior.drag()
        .on('drag', function () {
            g.selectAll('*')
                .attr('cx', d3.event.x)
                .attr('cy', d3.event.y);
        });

var resize = d3.behavior.drag()
        .on('drag', function () {
            g.selectAll('.resizingContainer')
                    .attr('r', function (c) {
                        return Math.pow(Math.pow(this.attributes.cx.value - d3.event.x, 2) + Math.pow(this.attributes.cy.value - d3.event.y, 2), 0.5) + 6;
                    });
            g.selectAll('.circle')
                    .attr('r', function (c) {
                        return Math.pow(Math.pow(this.attributes.cx.value - d3.event.x, 2) + Math.pow(this.attributes.cy.value - d3.event.y, 2), 0.5);
                    });
        });


var g = box.selectAll('.draggableCircle')
        .data([{
            x: 65,
            y: 55,
            r: 25
        }])
        .enter()
        .append('g')
        .attr('class', 'draggableCircle');

g.append('svg:circle')
        .attr('class', 'resizingContainer')
        .attr('cx', function (d) {
            return d.x;
        })
        .attr('cy', function (d) {
            return d.y;
        })
        .attr('r', function (d) {
            return d.r + 6;
        })
        .style('fill', '#999')
        .call(resize);

g.append('svg:circle')
        .attr('class', 'circle')
        .attr('cx', function (d) {
            return d.x;
        })
        .attr('cy', function (d) {
            return d.y;
        })
        .attr('r', function (d) {
            return d.r;
        })
        .call(drag)
        .style('fill', 'black');


var distance = function (p1, p2) {
    return Math.pow(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2), 0.5);
}

var resize2 = d3.behavior.drag()
        .on('drag', function () {
            var c = g2.selectAll('.resizingSquare');
            var s = g2.selectAll('.square');

            var e = d3.event;
            var x = Number(this.attributes.x.value);
            var y = Number(this.attributes.y.value);
            var w = Number(this.attributes.width.value);
            var h = Number(this.attributes.height.value);
            var c1 = { x: x, y: y };
            var c2 = { x: x + w, y: y };
            var c3 = { x: x + w, y: y + h };
            var c4 = { x: x, y: y + h };

            // figure out which corner this is closest to
            var d = []
            var m1 = distance(e, c1)
            var m2 = distance(e, c2)
            var m3 = distance(e, c3)
            var m4 = distance(e, c4)
            switch (Math.min(m1, m2, m3, m4)) {
                case m3:
                    c
                        .attr('width', function () { return w + (e.x - c3.x) + 12 })
                        .attr('height', function () { return h + (e.y - c3.y) + 12 })
                    s
                        .attr('width', function () { return w + (e.x - c3.x) })
                        .attr('height', function () { return h + (e.y - c3.y) })
                    break;
            }
        });

var g2 = box.selectAll('.draggableSquare')
    .data([{
        x: 65,
        y: 155,
        width: 70,
        height: 70
    }])
    .enter()
    .append('g')
    .attr('class', 'draggableSquare');

g2
    .append('svg:rect')
        .attr('class', 'resizingSquare')
        .attr("width", function (d) {
            return d.width + 12;
        })
        .attr("height", function (d) {
            return d.height + 12;
        })
        .attr("x", function (d) {
            return d.x - 6;
        })
        .attr("y", function (d) {
            return d.y - 6;
        })
        .attr("rx", 6)
        .attr("ry", 6)
        .style("fill", '#999')
        .call(resize2);

g2
    .append('svg:rect')
        .attr('class', 'square')
        .attr("width", function (d) {
            return d.width;
        })
        .attr("height", function (d) {
            return d.height;
        })
        .attr("x", function (d) {
            return d.x;
        })
        .attr("y", function (d) {
            return d.y;
        })
        .attr("rx", 6)
        .attr("ry", 6)
        .style("fill", d3.scale.category20c());

JS 斌 - https://jsbin.com/zenomoziso/1/edit

也就是说，如果您希望在概念验证之外使用它，那将会非常困难。一旦你有更多的元素，上面的几个问题就会显现出来

  1. 正在使用的容器(g 或 g2)是一个全局变量。
  2. 代码很笨重(我只是根据 watch 添加了大部分代码——可能有更有效的方法来做同样的事情——例如，你不能在 DragStart 上设置起始位置并使用它来计算尺寸的变化)
  3. 代码可以更简洁(考虑对象、更好的命名约定等)。您可能只想在主 block 中执行 d3.data... squares({ resize: true, move: true }) 而不是所有单独的步骤。
  4. 你最好搜索一些现有的图表库(为什么还要做所有的数学，当它已经完成和测试时:-)) - 我在这里找到了一个带有 Canvas 变体的博客 - http://simonsarris.com/blog/510-making-html5-canvas-useful

关于d3.js - 如何在d3 js中调整矩形的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31206525/

29 4 0
文章推荐： string - 在 Stata 中使用循环将字符串变量成对加入两个
文章推荐： ibm-watson - 使用带有 watson-developer-cloud 包的 Watson 问答服务时如何获得完整答案？
文章推荐： perl - 使用 Perl 打开文件并预览其内容
文章推荐： shell - 通过环境传递 bash 代码(用于 docker-compose)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com