Graphic with SVG

Question

I have a chart made with SVG generated by a Java code that I found on D3.Js that I am trying to use it in a college job, but I have a problem to put it inside a div.

I am setting the chart size using Scale passing a value of (0.33)

#graphicsBubble svg {   position: absolute;   transform: scale(0.33); }

But every time I move the size of the browser screen, the graph leaves the div.

How could I ever get him inside the div ?

Javascript:

var matrix = [
[0, 60, 20, 40, 28, 29, 3],
[60, 0, 20, 40, 28, 29, 3],
[20, 20, 0, 0, 7, 11, 2],
[40, 40, 0, 0, 21, 18, 1],
[28, 28, 7, 21, 0, 0, 0],
[29, 29, 11, 18, 0, 0, 0],
[3, 3, 2, 1, 0, 0, 0]


];

var chord = d3.layout.chord()
    .padding(.05)
    .sortSubgroups(d3.descending)
    .matrix(matrix);

var width = 720,
    height = 720,
    outerRadius = height/2,
    innerRadius = outerRadius-80;
    

var fill = d3.scale.ordinal()
    .domain(d3.range(10))
    .range(["#2255A4", "#006629", "#15295E","#790D1A","#FFE000","#060606","#0F793B","#15295E","#B40224","#13803F"]);
 
var country = ["LifeTot","LifeOn","ModeCrane","ModeBasket","Check1","Check2","CheckUnk"];

/*TOOL TIP EVERY SECTOR:*/
/*·Totale= */
  var total_tests = [100,60,20,40,28,29,3];
/*+LifeOFF=*/
  /*var total_losses= [0,0,0,0,0,0,0];*/
/*+LifeON=*/
  var total_wins = [60,60,20,40,28,29,3];
/*  ·h Mode CRANE*/
  var total_drawn = [20,20,20,0,7,11,2];
/*  ·h Mode BASKET*/ 
  var total_tied = [40,40,0,40,21,18,1];

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(innerRadius+20);

var svg = d3.select("#graphicsBubble").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll("g.group")
      .data(chord.groups)
      .enter().append("svg:g")
      .attr("class", "group")
      .on("mouseover", fade(.1))
      .on("mouseout", fade(1));

g.append("svg:path")
      .style("stroke", function(d) { return fill(d.index); })
      .style("fill", function(d) { return fill(d.index); })
      .attr("d", arc);

  g.append("svg:text")
      .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
      .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"+
             "translate(" + (innerRadius+25) + ")"
            + (d.angle > Math.PI ? "rotate(180)" : "");
      })
      .text(function(d) { return country[d.index]; });

 g.append("svg:title")
  .text(function(d,i) {
    return "·Totale= " + total_tests[i] +"h"+"\n"+
            "--------------" +"\n"+
      /*"+LifeOFF= "+ total_losses[i] +"h"+"\n"+*/
      "+LifeON=  "+ total_wins[i] +"h"+"\n"+ 
      "  · "+ total_drawn[i]+"h Mode CRANE" +"\n"+
      "  · "+ total_tied[i]+ "h Mode BASKET"+"\n";
  });
   
var fade_path = svg.append("svg:g")
    .attr("class", "chord")
  .selectAll("path")
    .data(chord.chords)
  .enter().append("svg:path")
    .attr("d", d3.svg.chord().radius(innerRadius))
    .style("fill", function(d) { return fill(d.source.index); })
 .style("opacity", 1)
 .on("mouseover", fade_chord(.3))
     .on("mouseout", fade_chord(1))
    .append("svg:title")
 .text(function(d) { 
                    return "Relazione"+
                           "\n"+
                           "R."+country[d.source.index] + " → " + "C." + country[d.target.index] + "=" + d.source.value + " ("+d3.round(d.source.value*100/total_tests[d.source.index],0)+"%)\n"+
                           "R."+country[d.target.index] + " → " + "C." + country[d.source.index] + "=" + d.target.value + " ("+d3.round(d.target.value*100/total_tests[d.target.index],0)+"%)";
                    });


// Returns an event handler for fading a given chord group.
function fade(opacity) {
  return function(g, i) {
    svg.selectAll(".chord path")
        .filter(function(d) { 
        //console.log(i);
        return d.source.index != i && d.target.index != i; }) //filter all chords which don't begin or end at the one that has mouse over right now
      .transition()
        .style("opacity", opacity);
  };
}

function fade_chord(opacity) {
  return function() {
    var i = this;
    svg.selectAll(".chord path")
        .filter(function(d) {
     return this != i; 
        })
      .transition()
        .style("opacity", opacity);
  };
}

.chord path {
  fill-opacity: .67;
  stroke: #000;
  stroke-width: .5px;
}




#graphicsBubble svg {
  position: absolute;
  transform: scale(0.33);
}

/*GALGE*/

.widget1 {
	position: absolute;
	height:48%;
	width:48%; 
	top: 0;
	left: 2;

    display: flex;
    justify-content: center;

	background-color: rgba(48,55,65,0.5);/*#303741;*/
	border-radius: 0px;
	box-shadow: 0px 0px 1px 0px #06060d;
}

.widget2 {
	position: absolute;
	height:48%;
	width:48%; 
	top: 0;
	right: 0;

	background-color: rgba(48,55,65,0.5);/*#303741;*/
	border-radius: 0px;
	box-shadow: 0px 0px 1px 0px #06060d;
}

.widget3 {
	position: absolute;
	height:48%;
	width:48%;  
	bottom: 0;
	left: 0;

	background-color: rgba(48,55,65,0.5);/*#303741;*/
	border-radius: 0px;
	box-shadow: 0px 0px 1px 0px #06060d;
}

.widget4 {
	position: absolute;
	height:48%;
	width:48%; 
	bottom: 0;
	right: 0; 

	background-color: rgba(48,55,65,0.5);/*#303741;*/
	border-radius: 0px;
	box-shadow: 0px 0px 1px 0px #06060d;
}

.triangle {
  position:absolute;
  /*width: 0;
  height: 0;*/
  border-style: solid;
  border-width: 40px 0 0 40px;
  border-color: transparent transparent transparent #48c15e;
  bottom: 0;
  left: 0;
}

.chart-container{
    padding:25px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
<style>
    #graphicsBubble{
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 47.5%;
      height: 60%;
      margin-left: 2.5%;
      float: left;
      background-color: pink;
    }
</style>

</head>
<body>
    <div id="graphicsBubble"></div>
    
    <script src="https://d3js.org/d3.v3.min.js"></script><!--GRAFICO-->
</body>

Answer 1

Simply exchange the following part of the code:

var svg = d3.select("#graphicsBubble").append("svg:svg")
    .attr("width", width)
    .attr("height", height)
    .append("svg:g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

To:

    var svg = d3.select("#graphicsBubble").append("svg:svg")
  .attr("viewBox", [0, 0, width, height])
  .attr("font-size", 12)
  .append("svg:g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

Answer 2

Well, I hope it helps by testing your code, I didn’t notice the graph coming out of the div, just getting bigger than it, tangent to the height, if that’s the problem, you can solve it with the comment code below:

<style>
    #graphicsBubble{
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 47.5%;
      height: 60%;
      margin-left: 2.5%;
      float: left;
      background-color: pink;
      min-height: 250px; /* adicionar essa altura mínima na div */
    }
</style>