index.html

  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
  <!---  <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .node {}

        .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }

        /*
        button {
        width: 150px;
        font-size: 15px;
        padding: 7px;
        border-radius: 3px;
        border: 3px solid #999;
        color: black;
        cursor: pointer;
        position : absolute;
        top: 500px;
        right: 550px;
        } */
        div {
        width:270px;
        min-height:200px; 
        max-height:370px;
        padding: 10px;
        border: 1px solid #999;
        position: absolute; 
        top: 0; 
        right: 440px;
        display: inline-block;
        overflow-y: scroll;
        margin: 0;
        }
    
    </style>
    <!--width: 270px;-->
    <link rel="shortcut icon" href="#">
</head>
<body>
<p id="id"></p>  <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
<svg width="960" height="600"></svg>

<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
<script src="https://d3js.org/d3-selection-multi.v1.js"></script>

<!-- Rücksetzbuttons -->
<button onclick="javascript:location.reload();">Reload</button>
<button onclick="resetGraph()">Reset graph</button>
<button onclick="resetZoom()">Reset zoom</button>
<button onclick="center()">Center</button>
<div id = "textbox" style="border:1px solid">Click node</div>


<script type="text/javascript">
//    var colors = d3.scaleOrdinal(d3.schemeCategory10);
    
// Farbgruppen
    var color = d3.scaleOrdinal()
    .domain(["citing", "input", "cited"])
    //.range([ "#F8766D", "#00BA38", "#619CFF"])
    .range([' #01d7c0', ' #8b90fe ', '  #01cd2f '])

   /* var x = d3.scaleOrdinal()
    .domain(["citing", "input", "cited"])
    .range([10, 200, 340])*/