如何使所有svg元素适合div，不溢出和隐藏元素？

Question

我的页面中有svg图表，我使用的是d3。我无法获取svg中的元素（圆圈）以适应html，换句话说，我不希望元素溢出。我尝试更改viewport和viewBox属性但是没有用。

这就是发生的事情 Pictrue of the problem

svg属性的定义

     var myChart = d3.select('#bubbles')
    .append("div")
    .style("transition", "all", "1s")
    .classed("svg-container", true)
  .append('svg')
    .attr("id", "svgId")
    .attr("viewport", "0 0 300 300")
    .attr("viewBox", "2 2 400")
    .attr("width", "80%")
    .attr("height", getBubblesHight() + "px")
    .classed("svg-content-responsive", true)
    .style("float","right")


  var link = myChart.selectAll('line')
    .data(links).enter().append('line')
    .attr('stroke', palette.gray)
    .attr('strokewidth', '1');

  var node = myChart.selectAll('circle')
    .data(nodes).enter()
    .append('g')
    .call(force.drag);

  node.append('circle')

  .attr('cx', function(d) {
      return d.x;
    })
    .attr('cy', function(d) {
      return d.y;
    })
    .attr('r', function(d, i) {
      console.log(d.value);
      if (d.group) {
        return 38;
      } else  if(d.main){
        return 68;
      }else{
        return 50;

      }
    })
    .style("fill", function(d,i){
                  if(d.main&&!d.group){
                    return    "#f5f5f5";
                  }else {
                    return "#dcdcdc";
                  }
              })

  .attr('strokewidth', function(d, i) {
      if (i > 0) {
        return '0';
      } else {
        return '0';
      }
    })
    .attr("class", function(d) {
      if (d.project) {

      } else {
        return "bubble";
      }
    })
    .attr("id", function(d, i) {
      return d.id;

    })

  .attr('stroke', function(d, i) {
    if (i > 0) {
      return '';
    } else {
      return '';
    }
  })

  ;

  force.on('tick', function(e) {
    node.attr('transform', function(d, i) {
      return 'translate(' + d.x + ',' + d.y + ')'
    })

    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.append('text')
    .text(function(d) {
      return d.name;
    })
    .attr("class", "text")
    .attr('font-family', 'PT Sans', 'sans-serif')
    .attr('fill', "#3d3d3d")
    .attr('text-anchor', function(d, i) {
      return 'middle';
    })
    .attr('font-size', function(d, i) {
      if (i > 0) {
        return '.8em';
      } else {
        return '.8em';
      }
    })

  force.start();

Answer 1

由于你没有粘贴你的d3.layout.force()（假设这是v3.x），很难说什么，但我猜你错过了{ {1}}，或者设置不正确。

这是一个演示（代码不是我的，我只是从小提琴中复制而来）没有size：

size

点击＆＃34;运行代码段＆＃34;：

＆＃13;

＆＃13;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .linkDistance(50)
    .charge(-200)
    .on("tick", tick)
    .start();

＆＃13;

var links = [{
    "source": "Analytics",
    "target": "Science"
}, {
    "source": "Analytics",
    "target": "Software"
}, {
    "source": "Analytics",
    "target": "Story"
}, {
    "source": "Science",
    "target": "Math"
}, {
    "source": "Science",
    "target": "Statistics"
}, {
    "source": "Software",
    "target": "R"
}, {
    "source": "Software",
    "target": "SAS"
}, {
    "source": "Software",
    "target": "Other"
}, {
    "source": "Story",
    "target": "Business Communication"
}, {
    "source": "Story",
    "target": "Visualization"
}];
var nodes = {}

// Compute the distinct nodes from the links.
links.forEach(function (link) {
    link.source = nodes[link.source] || (nodes[link.source] = {
        name: link.source
    });
    link.target = nodes[link.target] || (nodes[link.target] = {
        name: link.target
    });
    link.value = +link.value;
});

var width = 280
height = 370;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .linkDistance(50)
    .charge(-200)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .on("click", click)
    .on("dblclick", dblclick)
    .call(force.drag);

node.append("circle")
    .attr("r", 12)
    .style("fill", "#C71585");

node.append("text")
    .attr("x", 14)
    .attr("dy", ".35em")
    .style("fill", "#333")
    .text(function (d) {
    return d.name;
});

function tick() {
    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("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

function mouseover() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16);
}

function mouseout() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 12);
}
// action to take on mouse click
function click() {
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 22)
        .style("stroke-width", ".5px")
        .style("opacity", 1)
        .style("fill", "#E34A33")
        .style("font", "17.5px serif");
    d3.select(this).select("circle").transition()
        .duration(750)
        .style("fill", "#E34A33")
        .attr("r", 16)
}

// action to take on mouse double click
function dblclick() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 12)
        .style("fill", "#E34A33");
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 14)
        .style("stroke", "none")
        .style("fill", "#E34A33")
        .style("stroke", "none")
        .style("opacity", 0.6)
        .style("font", "14px serif");
}

＆＃13;

.link {
    stroke: #666;
    opacity: 0.6;
    stroke-width: 1.5px;
}
.node circle {
    stroke: #fff;
    opacity: 0.6;
    stroke-width: 1.5px;
}
text {
    font: 15px serif;
    opacity: 0.6;
    pointer-events: none;
}

＆＃13;

＆＃13;

＆＃13;

现在使用<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>的相同代码：

size

点击＆＃34;运行代码段＆＃34;：

＆＃13;

＆＃13;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(50)
    .charge(-200)
    .on("tick", tick)
    .start();

＆＃13;

var links = [{
    "source": "Analytics",
    "target": "Science"
}, {
    "source": "Analytics",
    "target": "Software"
}, {
    "source": "Analytics",
    "target": "Story"
}, {
    "source": "Science",
    "target": "Math"
}, {
    "source": "Science",
    "target": "Statistics"
}, {
    "source": "Software",
    "target": "R"
}, {
    "source": "Software",
    "target": "SAS"
}, {
    "source": "Software",
    "target": "Other"
}, {
    "source": "Story",
    "target": "Business Communication"
}, {
    "source": "Story",
    "target": "Visualization"
}];
var nodes = {}

// Compute the distinct nodes from the links.
links.forEach(function (link) {
    link.source = nodes[link.source] || (nodes[link.source] = {
        name: link.source
    });
    link.target = nodes[link.target] || (nodes[link.target] = {
        name: link.target
    });
    link.value = +link.value;
});

var width = 280
height = 370;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(50)
    .charge(-200)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .on("click", click)
    .on("dblclick", dblclick)
    .call(force.drag);

node.append("circle")
    .attr("r", 12)
    .style("fill", "#C71585");

node.append("text")
    .attr("x", 14)
    .attr("dy", ".35em")
    .style("fill", "#333")
    .text(function (d) {
    return d.name;
});

function tick() {
    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("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}

function mouseover() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16);
}

function mouseout() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 12);
}
// action to take on mouse click
function click() {
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 22)
        .style("stroke-width", ".5px")
        .style("opacity", 1)
        .style("fill", "#E34A33")
        .style("font", "17.5px serif");
    d3.select(this).select("circle").transition()
        .duration(750)
        .style("fill", "#E34A33")
        .attr("r", 16)
}

// action to take on mouse double click
function dblclick() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 12)
        .style("fill", "#E34A33");
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 14)
        .style("stroke", "none")
        .style("fill", "#E34A33")
        .style("stroke", "none")
        .style("opacity", 0.6)
        .style("font", "14px serif");
}

＆＃13;

.link {
    stroke: #666;
    opacity: 0.6;
    stroke-width: 1.5px;
}
.node circle {
    stroke: #fff;
    opacity: 0.6;
    stroke-width: 1.5px;
}
text {
    font: 15px serif;
    opacity: 0.6;
    pointer-events: none;
}

＆＃13;

＆＃13;

＆＃13;