个人中心
gpt4 book ai didi

javascript - D3.js - 在页面上重新定位圆环图

转载 作者：行者123 更新时间：2023-12-04 16:13:03 25 4
gpt4 key购买 nike

我正在使用 Matt Kohl 的动画圆环图在我网站上的元素中使用，我已经对其进行了重新设计，但无法弄清楚如何将其重新定位到页面上我想要的任何位置。它固定在浏览器窗口的中间。

我不会把所有的代码都放在这里，我会给你一个链接到他的教程中的代码:

https://bl.ocks.org/mattkohl/9f3a283813cf0226311f41595582c9eb

我已经尝试了 HTML 和 CSS 中的所有内容来操纵容器 svg 的大小和图表的位置，但无济于事。

这显然是需要在 JavaScript 中改变的东西，但我不是专家，所以我想我会在这里问。

最佳答案

下面是相关的代码看看。宽度和高度变量将控制 svg 大小，因为它们通过 .attr("width", width) 传入。和 .attr("height", height) .现在为了更好地定位 svg，我会给它一个类或 id，如下所示。然后，您可以使用 css 定位将 svg 定位到您想要的位置。

var duration = 1500,
transition = 200,
percent = 45,
width = window.innerWidth - 20,
height = window.innerHeight - 20;

var dataset = {
        lower: calcPercent(0),
        upper: calcPercent(percent)
    },
    radius = Math.min(width, height) / 3,
    pie = d3.layout.pie().sort(null),
    format = d3.format(".0%");

var arc = d3.svg.arc()
    .innerRadius(radius * .8)
    .outerRadius(radius);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "yourid")
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

#yourid{position: absolute;top:50%;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animated Donut with Percentage</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
    width: 100%;
    height: 100%;
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #fff;
    background-color: #000;
}
path.color0 {
    fill: #fff;
}
path.color1 {
    fill: rgba(255,255,255,.3);
}
text {
    font-size: 7em;
    font-weight: 400;
    line-height: 16em;
    fill: #fff;
}

</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var duration = 1500,
    transition = 200,
    percent = 45,
    width = 300,
    height = 300;

var dataset = {
            lower: calcPercent(0),
            upper: calcPercent(percent)
        },
        radius = Math.min(width, height) / 3,
        pie = d3.layout.pie().sort(null),
        format = d3.format(".0%");

var arc = d3.svg.arc()
        .innerRadius(radius * .8)
        .outerRadius(radius);

var svg = d3.select("body").append("svg")
        .attr("id", "yourid")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
                .data(pie(dataset.lower))
                .enter().append("path")
                .attr("class", function (d, i) {
                    return "color" + i
                })
                .attr("d", arc)
                .each(function (d) {
                    this._current = d;
                });

var text = svg.append("text")
        .attr("text-anchor", "middle")
        .attr("dy", ".3em");

var progress = 0;

var timeout = setTimeout(function () {
    clearTimeout(timeout);
    path = path.data(pie(dataset.upper));
    path.transition().duration(duration).attrTween("d", function (a) {
        var i = d3.interpolate(this._current, a);
        var i2 = d3.interpolate(progress, percent)
        this._current = i(0);
        return function (t) {
            text.text(format(i2(t) / 100));
            return arc(i(t));
        };
    });
}, 200);

function calcPercent(percent) {
    return [percent, 100 - percent];
};
</script>


附加的代码段将更改与大小和定位的虚拟值放在一起。

关于javascript - D3.js - 在页面上重新定位圆环图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49320268/

25 4 0
文章推荐： javascript - 动画图表从页面的特定部分开始
文章推荐： wpf - 在 Codebehind WPF 中隐藏具有数据模板的列表框的项目
文章推荐： .net - System.AddIn、AddInStore.Rebuild 导致 UnauthorizedAccessException
文章推荐： r - PieDonut 如何改变馅饼和 donut 的颜色
行者123
个人简介

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

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