简体   繁体   中英

d3.js - scaling bubble chart app

在此处输入图片说明

I have a bubble force chart application, and I've created various instances of it. However I can not seem to scale the bubbles in relation to the height/width of the svg.

http://jsfiddle.net/pPMqQ/138/

I've placed an inverse on the heights/widths to alter the viewport - but it doesn't feel like the right approach to me. Does anyone have any experience as to how to correct this?

                    var inverseHeight = 1/h * 100000;
                    var inverseWidth = 1/w * 100000;


                    var svg = d3.select(selector)
                        .append("svg")
                            .attr("class", "bubblechart")
                            .attr("width", parseInt(w + padding,10))
                            .attr("height", parseInt(h + padding,10))
                            .attr('viewBox', "0 0 "+parseInt(inverseWidth,10)+" "+parseInt(inverseHeight,10))
                            .attr('perserveAspectRatio', "xMinYMid")
                        .append("g")
                            .attr("transform", "translate(" + (w/4) + "," + (h/4) + ")");

I've tried to scale the actual bubbles http://jsfiddle.net/pPMqQ/143/

var scale = methods.width*.005;

Its producing an ideal effect - but the chart is not always central.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM