文章/答案/技术大牛

发布

问设置D3.js圆报表边界
EN

Stack Overflow用户

提问于 2020-08-08 21:48:27

回答 2查看 134关注 0票数 1

我试图建立一个可视化，这样更高的值单元就会被重力强迫到顶部和左边，但是我很难将多个圆圈保持在红色区域的div的边界内。你能帮我解决这个问题吗？

    function CreateCirclesOfProcessos(seletor, data, numWidth, numHeight) {

    let numBoundaryDiameter = 50;
    let numBoundaryRadius = 5;
    let numMaxRadius = 100;
    let numMargin = data.length * 10;
    let n = 50;
    
    const radiusScale = d3.scaleSqrt()
        .domain([0, d3.max(data, d => d.value)])
        .range([0, numMaxRadius]);

    const radius = function (d) {
        return radiusScale(d.value);
    }

    let objNodes = CreateProcessosNodes(n, numBoundaryRadius, numBoundaryDiameter, data, numWidth, numHeight);

    let objGraphData = GetProcessosGraphData(radius, objNodes);

    const objSVG = seletor.append('svg')
        .attr("width", numWidth)
        .attr("height", numHeight + numMargin);

    let objGroup = objSVG.append('g')
        .attr("transform", "translate(" + 70 + ", " + 70 + ")");

    objGroup.append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", numWidth)
        .attr("height", numHeight)
        .style("stroke", "none")
        .style("fill", "none");

    let objCircles = objGroup.selectAll("circle")
        .data(objGraphData.nodes)
        .enter()
        .append("g")
        .style("cursor", "pointer")
        .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

    objCircles.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", radius)
        .style("fill", "#FF5532")
        .style("stroke", "white");           
}

谢谢！！这是我在JsFiddle上的完整代码

javascript

d3.js

data-visualization

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-08-13 14:15:48

我使用d3.forceLimit解决了我的问题，在我的模拟方法上实现了下面的代码。

const wallForce = d3.forceLimit()
                    .radius(node => node.r)
                    .x0(0)
                    .x1(numWidth)
                    .y0(0)
                    .y1(numHeight);

const force = d3.forceSimulation()
                .nodes(objNodes)
                .force("x", d3.forceX().x(CoordinatePosition).strength(GetStrength))
                .force("y", d3.forceY().y(CoordinatePosition).strength(GetStrength))
                .force('many', d3.forceManyBody().strength(1))
                .force('collide', d3.forceCollide().radius(numRadius).strength(2.5))
                .force('walls', wallForce)
                .stop();

票数 0

Stack Overflow用户

发布于 2020-08-09 04:28:58

提供一个自定义的滴答函数，并使用它来保持项目的界限。我们还可以使用forceCenter将项目保存在中心：

const force = d3.forceSimulation(objNodes)
    .force("x", d3.forceX().x(CoordinatePosition).strength(GetStrength))
    .force("y", d3.forceY().y(CoordinatePosition).strength(GetStrength))
    .force('many', d3.forceManyBody().strength(2))
    .force('collide', d3.forceCollide().radius(numRadius).strength(1))
    .force("center", d3.forceCenter())
    .on('tick', () => {
        nodes.attr("cx", d => d.x = Math.max(radius, Math.min(width - radius, d.x)))
             .attr("cy", d => d.y = Math.max(radius, Math.min(height - radius, d.y)));
    })
    .stop();

其中nodes代表你的圆圈。在本例中，您必须从代码的前面传递objCircles选择：

  let objCircles = objGroup.selectAll("circle")
    .data(objGraphData.nodes)
    .enter()
    .append("g")
    .style("cursor", "pointer")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    });

  let objGraphData = GetProcessosGraphData(radius, objNodes, objCircles);

  // ...

  function GetProcessosGraphData(numRadius, objNodes, nodes) {
    // ...
  }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63320520

复制

相似问题

问设置D3.js圆报表边界
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置D3.js圆报表边界EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置D3.js圆报表边界
EN