d3.js γραφήματα σε Vue.js

[Επισκέπτης]

Προσπαθώ να βάλω γραφήματα d3.js μέσα σε webpack/Vue.js αλλά δέν παίζει τίποτε.

Έχει κάνει κάποιος παρόμοια δουλειά να μου δείξει  παραδείγματα καπου για να δώ πώς παίζουν;

  

[Επισκέπτης]

Χαίρομαι που δέν απαντατε γιατί αυτό σημαίνει ότι θα ασχοληθώ με κάτι πολύ ειδικευμένο και θα ξεχωρίσω απο το πλήθος   αλλά δεν χαίρομαι που δέν έχω resources για να δώ παραδείγματα.. απο βιντεάκια, eBook και προτζεκτια στο gitHub δέν έχω βγάλει ακόμα άκρη..  .. 

[Predatorkill]

Φιλε μου δε θα ξεχωρισεις επειδη ξερεις vue. Οτι κανει η vue κανει και η Angular/React, αλλα πραγματα θα σε κανουν να ξεχωριζεις.

ps: προσεχε με τη vue και το scalability σε μεγαλα apps. 😉

Επεξ/σία 24 Ιουνίου 2018 από Predatorkill

[alou]

Το D3 είναι πολύ μεγάλο από μόνο του και αν και έχω ασχοληθεί κάπως (πριν χρόνια, με angular 1), ίσα που έξυσα την επιφάνεια.

Αν ήθελα τώρα να κάνω κάτι με ανάλογα γραφήματα, δεν θα ήταν η πρώτη επιλογή μου πάντως γιατί υπάρχουν πιο light βιβλιοθήκες πιο βατές για αυτή τη δουλειά. Αν θες να κάνεις πιο βαθύ χώσιμο σε data visualisation και έχεις σκοπό να μάθεις πολύ καλά τη λογική του, go for it και υπό προϋποθέσεις, μπορεί να κάνεις κάτι που θα ξεχωρίζει.

Επι της ουσίας όμως, τι ακριβώς σε δυσκόλεψε όμως? πχ ένα παράδειγμα που είδα τυχαία, δεν σου βγαίνει να το πιάσει από εκεί?

 

[Επισκέπτης]

Τελείωσα το διάβασμα και κάνω τετοια παραδείγματα.. δηλαδή πειραματίζομαι με έτοιμο κώδικα.. 

Δοκιμάζω το συγκεκριμένο αλλά δέν παίζει και μου βγάζει errors 

1) The "data" option should be a function that returns a per-instance value in component definitions.

2) Error in mounted hook: "TypeError: Cannot read property 'length' of undefined"

 

<template>
<div id="app">
  <svg id="graph" class="chart"></svg>
  </div>
</template>

<script>
import * as d3 from 'd3'

export default {
  name: 'app',
      $el: '#graph',      
      data: {
        data: [4, 8, 15, 16, 23, 42]
      },
      methods: {
        renderChart: function(data) {
          var width = 420,
              barHeight = 20;

          var x = d3.scaleLinear()
              .domain([0, d3.max(data)])
              .range([0, width]);

          var chart = d3.select(this.$el)
              .attr("width", width)
              .attr("height", barHeight * data.length);

          var d = chart.selectAll("g")
              .data(data);
          d.exit().remove();

          var g = d.enter().append("g")
              .merge(d)
              .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
          g.selectAll("rect").remove();
          g.selectAll("text").remove();
          g.append("rect")
              .attr("width", x)
              .attr("height", barHeight - 1);
          g.append("text")
              .attr("x", function(d) { return x(d) - 3; })
              .attr("y", barHeight / 2)
              .attr("dy", ".35em")
              .text(function(d) { return d; });
        }
      },
      mounted: function() {
        this.renderChart(this.$data.data);
      },
      watch: {
        data: function(val) {
          this.renderChart(val);
        }
      }
    }
</script>

<style>
.chart rect {
  fill: steelblue;
}
.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}
</style>

 

Επεξ/σία 25 Ιουνίου 2018 από Επισκέπτης

[alou]

Είδες που αναφέρεται το συγκεκριμένο παράδειγμα; https://bost.ocks.org/mike/bar/ (είναι 3 κομμάτια το άρθρο)

Είναι σε Vue 2 αλλά δε νομίζω ότι σε πειράζει και πολύ αυτό, το θέμα είναι να καταλάβεις τη λογική. Αν θες μια γνώμη, από τον τρόπο που το αντιμετωπίζεις, έχω την αίσθηση ότι πρώτα πρέπει να μάθεις πιο καλά τη λογική του Vue και μετά να προσθέσεις πολυπλοκότητα.

[Predatorkill]

Γιατι χρησιμοποιεις es5 και οχι es6; Δεν χρησιμοποιεις webpack, babel;

[_EoS_]

Εμφανίζει error ότι το data πρέπει να είναι function δοκίμασε

data() {
  return {
    data: [4, 8, 15, 16, 23, 42]
  }
}

και λογικά παρακάτω στις methods θέλεις this.data.length