Question

D3图表的新功能，目前正在探索在同一个HTML页面上多次绘制相同类型的D3-Chart的可能性，希望我可以从此处获得一些帮助，以及之前有解决方案的人。谢谢。

D3.htm

<div class="row shadow">
    <div id="chart" class="chart-container" style="margin-left: 12%;">
</div>

相关的javascript是

D3.js

 var createGradient=function(svg,id,color1,color2){

        var defs = svg.append("svg:defs")

        var red_gradient = defs.append("svg:linearGradient")
                .attr("id", id)
                .attr("x1", "0%")
                .attr("y1", "0%")
                .attr("x2", "50%")
                .attr("y2", "100%")
                .attr("spreadMethod", "pad");

        red_gradient.append("svg:stop")
                .attr("offset", "50%")
                .attr("stop-color", color1)
                .attr("stop-opacity", 1);

        red_gradient.append("svg:stop")
                .attr("offset", "100%")
                .attr("stop-color", color2)
                .attr("stop-opacity", 1);
    };

    var percent = 95;

    var ratio=percent/100;

    var pie=d3.layout.pie()
            .value(function(d){return d})
            .sort(null);

    var w=150,h=150;

    var outerRadius=(w/2)-10;
    var innerRadius=70;
    if(percent <= 50){
    var color = ['#f72067','#ea0707','white'];
    }else if(percent <= 75){
    var color = ['#d9ff1e','#fcf802','white'];
    }else{
    var color = ['#30ff89','#00ff08','white'];
    } 

    var svg=d3.select("#chart")
            .append("svg")
            .attr({
                width:w,
                height:h,
                class:'shadow'
            }).append('g')
            .attr({
                transform:'translate('+w/2+','+h/2+')'
            });

    createGradient(svg,'gradient',color[0],color[1]);

    var arc=d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(2*Math.PI);

    var arcLine=d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0);


    var pathBackground=svg.append('path')

            .attr({
                d:arc
            })
            .style({
                fill:color[2]
            });


    var pathChart=svg.append('path')
            .datum({endAngle:0})
            .attr({
                d:arcLine
            })
            .style({
                fill:'url(#gradient)'
            });

    var middleCount=svg.append('text')
            .text(function(d){
                return d;
            })

            .attr({
                class:'middleText',
                'text-anchor':'middle',
                dy:15,
                dx:-05
            })
            .style({
                fill:color[1],
                'font-size':'40px'

            });
        svg.append('text')
            .text('%')
            .attr({
                class:'percent',
                'text-anchor':'middle',
                dx:25,
                dy:-5

            })
            .style({
                fill:color[1],
                'font-size':'20px'

            });

    var arcTween=function(transition, newAngle) {
        transition.attrTween("d", function (d) {
            var interpolate = d3.interpolate(d.endAngle, newAngle);
            var interpolateCount = d3.interpolate(0, percent);
            return function (t) {
                d.endAngle = interpolate(t);
                middleCount.text(Math.floor(interpolateCount(t)));
                return arcLine(d);
            };
        });
    };


    var animate=function(){
        pathChart.transition()
                .duration(750)
                .ease('cubic')
                .call(arcTween,((2*Math.PI))*ratio);


    };




    setTimeout(animate,0);
/*This End of D3 Radial progress Bar-Cart*/

为了更清楚地表达我想要的东西，请参见下图

Answer 1

将所有内容包含在只有dom-id作为参数的函数中，然后多次调用该函数。像这样（HTML）：

<div id="chart1" style="height: 300px;"></div>
<div id="chart2" style="height: 300px;"></div>

JS：

$(document).ready(function() {
  var gradient = function(domId) {
    [ YOUR CODE ]
  }

  gradient("chart1")
  gradient("chart2")
});

我已经把它放在了一个plunkr中：https://plnkr.co/edit/AD2W1Sadxwp0nuvuNIIM?p=preview

仅供参考：您应该指定您正在使用的d3版本。 v3和v4相差很大，不可互换。

在同一个html页面上多次显示相同的D3图表

1 个答案: