Question

SCREENSHOT我不知道我做错了什么，我尝试使用视口和视图框之间的每个组合，低边的图表仍然被切断，对此的任何帮助都非常感激，我刚刚开始学习js抱歉，如果它是一个愚蠢的问题。我也附加scrrenshot以防万一，我有黑色气泡图表的问题。我正在使用eclipse和d3.js库进行可视化和通过tomcat 8.0服务器进行部署。

!(function(){
"use strict"

var width,height
var chartWidth, chartHeight
var margin
var svg = d3.select("#svg1").append("svg")
var chartLayer = svg.append("g").classed("chartLayer", true)

main()

function main() {
    var range = 100
    var data = {
        nodes:d3.range(0, range).map(function(d){ return {label: "l"+d 
,r:~~d3.randomUniform(8, 28)()}}),
        links:d3.range(0, range).map(function(){ return 
{source:~~d3.randomUniform(range)(), target:~~d3.randomUniform(range)()} })        
    }

    setSize(data)
    drawChart(data)    
}

function setSize(data) {
    width = document.querySelector("#svg1").clientWidth
    height = document.querySelector("#svg1").clientHeight

    margin = {top:0, left:0, bottom:0, right:0 }


    chartWidth = width - (margin.left+margin.right)
    chartHeight = height - (margin.top+margin.bottom)

    svg.attr("width", width).attr("height", height)


    chartLayer
        .attr("width", chartWidth)
        .attr("height", chartHeight)
        .attr("transform", "translate("+[margin.left, margin.top]+")")


}

function drawChart(data) {

    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().id(function(d) { return d.index }))
        .force("collide",d3.forceCollide( function(d){return d.r + 1 
}).iterations(24) )
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(chartWidth / 2, chartWidth / 2))
        .force("y", d3.forceY(0))
        .force("x", d3.forceX(0))

    var link = svg.append("g")
        .attr("class", "links")
        .selectAll("foo")
        .data(data.links)
        .enter()
        .append("line")
        .attr("stroke", "transparent")

    var node = svg.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(data.nodes)
        .enter().append("circle")
        .attr("r", function(d){  return d.r })
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));    


    var ticked = function() {
        link
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        node
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
    }  

    simulation
        .nodes(data.nodes)
        .on("tick", ticked);

    simulation.force("link")
        .links(data.links);    



    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    } 

}
}());

的

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic Bootstrap Template</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <body> <script type = "text/javascript" src="d3V4/d3.js"></script> <script type = "text/javascript" src="d3V4/d3.min.js"></script> <script type = "text/javascript" src="d3-legend.js"></script> <style> <svg id="svg2" width="500" height="500" viewBox="-30 0 550 500 " ></svg> <script src="myscript.js" defer></script> <svg id="svg1" width="600" height="500"></svg> <script src="myscript2.js" defer></script> <svg id="svg3" width="750" height="450" viewBox="-295 0 680 550 "></svg> <script src="myscript3.js" defer></script> </body> </html>

的

图表正在减少。我究竟做错了什么？

0 个答案: