D3 javascript "kirjaston" kanssa ongelmia

Viestiketju alueella 'Ohjelmointi' , aloittaja jute, 28.03.2018.

  1. jute

    Rekisteröitynyt:
    10.04.2013
    Viestejä:
    242
    Tämmöistä juttua testaillut: https://d3js.org/

    Miksi esim. tämä koodi toimii hyvin: näyttää tältä https://bl.ocks.org/mbostock/1353700
    Koodi:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      width: 960px;
      height: 500px;
      position: relative;
    }
    
    form {
      position: absolute;
      top: 1em;
      left: 1em;
    }
    
    path {
      fill-rule: evenodd;
      stroke: #333;
      stroke-width: 2px;
    }
    
    .sun path {
      fill: #6baed6;
    }
    
    .planet path {
      fill: #9ecae1;
    }
    
    .annulus path {
      fill: #c6dbef;
    }
    
    </style>
    <form>
      <input type="radio" name="reference" id="ref-annulus">
      <label for="ref-annulus">Annulus</label><br>
      <input type="radio" name="reference" id="ref-planet" checked>
      <label for="ref-planet">Planets</label><br>
      <input type="radio" name="reference" id="ref-sun">
      <label for="ref-sun">Sun</label>
    </form>
    <script src="D3/d3.min.js"></script>
    <script>
    
    var width = 960,
        height = 500,
        radius = 80,
        x = Math.sin(2 * Math.PI / 3),
        y = Math.cos(2 * Math.PI / 3);
    
    var offset = 0,
        speed = 4,
        start = Date.now();
    
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(.55)")
      .append("g");
    
    var frame = svg.append("g")
        .datum({radius: Infinity});
    
    frame.append("g")
        .attr("class", "annulus")
        .datum({teeth: 80, radius: -radius * 5, annulus: true})
      .append("path")
        .attr("d", gear);
    
    frame.append("g")
        .attr("class", "sun")
        .datum({teeth: 16, radius: radius})
      .append("path")
        .attr("d", gear);
    
    frame.append("g")
        .attr("class", "planet")
        .attr("transform", "translate(0,-" + radius * 3 + ")")
        .datum({teeth: 32, radius: -radius * 2})
      .append("path")
        .attr("d", gear);
    
    frame.append("g")
        .attr("class", "planet")
        .attr("transform", "translate(" + -radius * 3 * x + "," + -radius * 3 * y + ")")
        .datum({teeth: 32, radius: -radius * 2})
      .append("path")
        .attr("d", gear);
    
    frame.append("g")
        .attr("class", "planet")
        .attr("transform", "translate(" + radius * 3 * x + "," + -radius * 3 * y + ")")
        .datum({teeth: 32, radius: -radius * 2})
      .append("path")
        .attr("d", gear);
    
    d3.selectAll("input[name=reference]")
      .data([radius * 5, Infinity, -radius])
        .on("change", function(radius1) {
          var radius0 = frame.datum().radius, angle = (Date.now() - start) * speed;
          frame.datum({radius: radius1});
          svg.attr("transform", "rotate(" + (offset += angle / radius0 - angle / radius1) + ")");
        });
    
    d3.selectAll("input[name=speed]")
        .on("change", function() { speed = +this.value; });
    
    function gear(d) {
      var n = d.teeth,
          r2 = Math.abs(d.radius),
          r0 = r2 - 8,
          r1 = r2 + 8,
          r3 = d.annulus ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
          da = Math.PI / n,
          a0 = -Math.PI / 2 + (d.annulus ? Math.PI / n : 0),
          i = -1,
          path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
      while (++i < n) path.push(
          "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
          "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
          "L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
          "A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
          "L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0),
          "L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0));
      path.push("M0,", -r3, "A", r3, ",", r3, " 0 0,0 0,", r3, "A", r3, ",", r3, " 0 0,0 0,", -r3, "Z");
      return path.join("");
    }
    
    d3.timer(function() {
      var angle = (Date.now() - start) * speed,
          transform = function(d) { return "rotate(" + angle / d.radius + ")"; };
      frame.selectAll("path").attr("transform", transform);
      frame.attr("transform", transform); // frame of reference
    });
    </script>
    MUTTA JOS KYSEESSÄ TARVITSEMAANI "VIIVA GRAFIIKKAA" MIKÄÄN ESIMERKKI EI TOIMI ?!?!?! Tulee tyhjä sivu
    Esim. tämä ei toimi: pitäisi näyttää tältä https://bl.ocks.org/mbostock/1399097
    Koodi:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    body {
      font: 10px sans-serif;
    }
    
    rect {
      fill: #ddd;
    }
    
    .grid line {
      stroke: #fff;
    }
    
    .grid line.minor {
      stroke-width: .5px;
    }
    
    .grid text {
      display: none;
    }
    
    .axis line {
      stroke: #000;
    }
    
    path {
      display: none;
    }
    
    </style>
    <body>
    <script src="D3/d3.min.js"></script>
    <script>
    
    var m = [10, 10, 20, 10],
        w = 960 - m[1] - m[3],
        h = 80 - m[0] - m[2],
        x = d3.time.scale().domain([Date.UTC(2001, 0, 1), Date.UTC(2002, 0, 1)]).range([0, w]),
        y = d3.scale.linear().range([0, h]);
    
    var svg = d3.select("body").append("svg")
        .attr("width", w + m[1] + m[3])
        .attr("height", h + m[0] + m[2])
      .append("g")
        .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
    
    svg.append("rect")
        .attr("width", w)
        .attr("height", h);
    
    svg.append("g")
        .attr("class", "x grid")
        .attr("transform", "translate(0," + h + ")")
        .call(d3.svg.axis().scale(x).tickSize(-h));
    
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + h + ")")
        .call(d3.svg.axis().scale(x).tickSize(12).tickPadding(-2))
      .selectAll("text")
        .attr("x", 5)
        .attr("dy", null)
        .style("text-anchor", null);
    
    </script>
     
    Viimeksi muokattu: 28.03.2018
  2. Paapaa

    Rekisteröitynyt:
    14.04.2005
    Viestejä:
    10 933
    @jute, Laitatko koodipätkät omiin CODE-tägeihin, jotta näyttää esim. tältä:

    HTML:
    <script>console.log('Hello, console!');</script>
    Helpottaa kummasti viestisi lukemista. Kannattaa myös kurkata konsoliin, ja katsoa sieltä vihjeitä, miksi homma kusee. Paina Chromessa Shift-Ctrl-i ja kerro, mitä erroreita tulee Console-välilehdelle, jos lainkaan.
     
  3. jute

    Rekisteröitynyt:
    10.04.2013
    Viestejä:
    242
    Jep, en äsken osannut tuota tehdä, nyt osaan.
     

Jaa tämä sivu

Alibi
Anna
Deko
Dome
Erä
Hymy
Kaksplus
Kippari
Kotilääkäri
Kotiliesi
Koululainen
Ruoka.fi
Parnasso
Seura
Suomen Kuvalehti
TM Rakennusmaailma
Tekniikan Maailma
Vauhdin Maailma
Golfpiste
Vene
Nettiauto
Ampparit
Plaza
Muropaketti