Wie übergebe ich Daten vom Vue js-Methodenbereich an eine externe JS-Datei?

Das ist mein Komponentencode von vue jsWie übergebe ich Daten vom Vue js-Methodenbereich an eine externe JS-Datei?

<template> 
 
    <div class="grapha"> 
 
     <div id="chart2"></div> 
 

 
    </div> 
 
</template> 
 

 
<script> 
 
    // var apiURL = 'https://jsonplaceholder.typicode.com/users'; 
 
var apiURL = 'http://localhost:3000/db'; 
 
export default { 
 

 
    name: 'grapha', 
 
    data() { 
 
    return { 
 
     users:[] 
 
    } 
 
    }, 
 
    methods: { 
 
    fetchData: function() { 
 
    var self = this; 
 
    $.get(apiURL, function(data) { 
 
     self.users = data; 
 
    }); 
 

 
    } 
 
    }, 
 
    created: function(){ 
 
    this.fetchData(); 
 
    } 
 

 
} 
 

 
</script>

Hier ist mein d3 Combo-Chart-Code, hier ist eine Variable mit dem Namen Datenwert nimmt und zeigt es auf der Grafik.

Jetzt möchte ich Daten von self.users (vue js Komponente) erhalten, um es auf Datenvariable (externe Funktion) zu übergeben. Könnten Sie mir vorschlagen, was der mögliche Weg wäre?

function getTextWidth(text, fontSize, fontName) { 
 
    c = document.createElement("canvas"); 
 
    ctx = c.getContext("2d"); 
 
    ctx.font = fontSize + ' ' + fontName; 
 
    return ctx.measureText(text).width; 
 
} 
 

 
function DataSegregator(array, on) { 
 
    var SegData; 
 
    OrdinalPositionHolder = { 
 
     valueOf: function() { 
 
      thisObject = this; 
 
      keys = Object.keys(thisObject); 
 
      keys.splice(keys.indexOf("valueOf"), 1); 
 
      keys.splice(keys.indexOf("keys"), 1); 
 
      return keys.length == 0 ? -1 : d3.max(keys, function (d) { return thisObject[d] }) 
 
     } 
 
     , keys: function() { 
 
      keys = Object.keys(thisObject); 
 
      keys.splice(keys.indexOf("valueOf"), 1); 
 
      keys.splice(keys.indexOf("keys"), 1); 
 
      return keys; 
 
     } 
 
    } 
 
    array[0].map(function (d) { return d[on] }).forEach(function (b) { 
 
     value = OrdinalPositionHolder.valueOf(); 
 
     OrdinalPositionHolder[b] = OrdinalPositionHolder > -1 ? ++value : 0; 
 
    }) 
 

 
    SegData = OrdinalPositionHolder.keys().map(function() { 
 
     return []; 
 
    }); 
 

 
    array.forEach(function (d) { 
 
     d.forEach(function (b) { 
 
      SegData[OrdinalPositionHolder[b[on]]].push(b); 
 
     }) 
 
    }); 
 

 
    return SegData; 
 
} 
 

 

 
Data = self.users.comboChart; 
 

 
var margin = { top: 20, right: 30, bottom: 60, left: 40 }, 
 
    width = 800 - margin.left - margin.right, 
 
    height = 500 - margin.top - margin.bottom; 
 

 
var textWidthHolder = 0; 
 
/// Adding Date in LineCategory 
 
Data.forEach(function (d) { 
 
    d.LineCategory.forEach(function (b) { 
 
     b.Date = d.Date; 
 
    }) 
 
}); 
 

 

 

 

 
var Categories = new Array(); 
 
// Extension method declaration 
 

 
// Categories.pro; 
 

 
var Data; 
 
var ageNames; 
 
var x0 = d3.scale.ordinal() 
 
    .rangeRoundBands([0, width], .1); 
 
var XLine = d3.scale.ordinal() 
 
    .rangeRoundPoints([0, width], .1); 
 
var x1 = d3.scale.ordinal(); 
 

 
var y = d3.scale.linear() 
 
    .range([height, 0]); 
 

 
var YLine = d3.scale.linear().range([height, 0]) 
 
.domain([0, d3.max(Data, function (d) { return d3.max(d.LineCategory, function (b) { return b.Value }) })]); 
 

 
var color = d3.scale.ordinal() 
 
    .range(["#6aae6a", "#639ce4", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 
 

 
var line = d3.svg.line().x(function (d) { 
 
    return x0(d.Date) + x0.rangeBand()/2; 
 
}).y(function (d) { return YLine(d.Value) }); 
 

 

 

 

 
var xAxis = d3.svg.axis() 
 
    .scale(x0) 
 
    .orient("bottom"); 
 

 
// var yAxis = d3.svg.axis() 
 
//  .scale(y) 
 
//  .orient("left") 
 
//  .tickFormat(d3.format(".2s")); 
 

 
// var YLeftAxis = d3.svg.axis().scale(YLine).orient("right").tickFormat(d3.format(".2s")); 
 

 
var svg = d3.select("#chart2").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 

 

 

 

 
// Bar Data categories 
 
Data.forEach(function (d) { 
 
    d.Categories.forEach(function (b) { 
 
     if (Categories.findIndex(function (c) { return c.Name===b.Name}) == -1) { 
 
      b.Type = "bar"; 
 
      // console.log(JSON.stringify(b)) 
 
      Categories.push(b) 
 
     } 
 
    }) 
 
}); 
 

 

 
// Line Data categories 
 
Data.forEach(function (d) { 
 
    d.LineCategory.forEach(function (b) { 
 
     if (Categories.findIndex(function (c) { return c.Name === b.Name }) == -1) { 
 
      b.Type = "line"; 
 
      // console.log(JSON.stringify(b)) 
 
      Categories.push(b) 
 
     } 
 
    }) 
 
}); 
 

 
// Processing Line data 
 
lineData = DataSegregator(Data.map(function (d) { return d.LineCategory }), "Name"); 
 

 
// Line Coloring 
 
LineColor = d3.scale.ordinal(); 
 
LineColor.domain(Categories.filter(function (d) { return d.Type == "line" }).map(function (d) { return d.Name })); 
 
LineColor.range(["#333471", "#386a07", "#7f8ed4", "#671919", "#0b172b"]) 
 
x0.domain(Data.map(function (d) { return d.Date; })); 
 
XLine.domain(Data.map(function (d) { return d.Date; })); 
 
x1.domain(Categories.filter(function (d) { return d.Type == "bar" }).map(function (d) { return d.Name})).rangeRoundBands([0, x0.rangeBand()]); 
 
y.domain([0, d3.max(Data, function (d) { return d3.max(d.Categories, function (d) { return d.Value; }); })]); 
 

 
svg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 

 
var state = svg.selectAll(".state") 
 
    .data(Data) 
 
    .enter().append("g") 
 
    .attr("class", "state") 
 
    .attr("transform", function (d) { return "translate(" + x0(d.Date) + ",0)"; }); 
 

 
state.selectAll("rect") 
 
    .data(function (d) { return d.Categories; }) 
 
    .enter().append("rect") 
 
    .attr("width", x1.rangeBand()) 
 
    .attr("x", function (d) { return x1(d.Name); }) 
 
    .attr("y", function (d) { return y(d.Value); }) 
 
    //.attr("height", function (d) { return height - y(d.Value); }) 
 
    .style("fill", function (d) { return color(d.Name); }) 
 
    .transition().delay(500).attrTween("height", function (d) { 
 
     var i = d3.interpolate(0, height - y(d.Value)); 
 
     return function (t) 
 
     { 
 
      return i(t); 
 
     } 
 
    }); 
 

 
// drawaing lines 
 
svg.selectAll(".lines").data(lineData).enter().append("g").attr("class", "line") 
 
.each(function (d) { 
 
    Name=d[0].Name 
 
    d3.select(this).append("path").attr("d", function (b) { return line(b) }).style({ "stroke-width": "3px", "fill": "none" }).style("stroke", LineColor(Name)).transition().duration(1500); 
 
}) 
 

 

 
// Legends 
 
var LegendHolder = svg.append("g").attr("class", "legendHolder"); 
 
var legend = LegendHolder.selectAll(".legend") 
 
    .data(Categories.map(function (d) { return {"Name":d.Name,"Type":d.Type}})) 
 
    .enter().append("g") 
 
    .attr("class", "legend") 
 
    .attr("transform", function (d, i) { return "translate(0," +(height+ margin.bottom/2)+ ")"; }) 
 
    .each(function (d,i) { 
 
     // Legend Symbols 
 

 

 
     d3.select(this).append("rect") 
 
     .attr("width", function() { return 18 }) 
 
     .attr("x", function (b) { 
 

 
      left = (i+1) * 15 + i * 18 + i * 5 + textWidthHolder; 
 
      return left; 
 
     }) 
 
     .attr("y", function (b) { return b.Type == 'bar'?0:7}) 
 
     .attr("height", function (b) { return b.Type== 'bar'? 18:5 }) 
 
     .style("fill", function (b) { return b.Type == 'bar' ? color(d.Name) : LineColor(d.Name) }); 
 

 
     // Legend Text 
 

 
     d3.select(this).append("text") 
 
     .attr("x", function (b) { 
 

 
      left = (i+1) * 15 + (i+1) * 18 + (i + 1) * 5 + textWidthHolder; 
 

 
      return left; 
 
     }) 
 
     .attr("y", 9) 
 
     .attr("dy", ".35em") 
 
     .style("text-anchor", "start") 
 
     .text(d.Name); 
 

 
     textWidthHolder += getTextWidth(d.Name, "10px", "calibri"); 
 
    }); 
 

 

 
// Legend Placing (center) 
 
d3.select(".legendHolder").attr("transform", function (d) { 
 
    thisWidth = d3.select(this).node().getBBox().width; 
 
    return "translate(" + ((width)/2 - thisWidth/2) + ",0)"; 
 
}) 
 

 
// round the rectangle corners 
 
svg.selectAll('rect').attr('rx', 5).attr('ry', 5);

Quelle

2017-09-14 Sharat

Sie würden wollen, tatsächlich wahrscheinlich, dass 'fetchData' Methode aus Ihrer vue Komponente extrahieren und sie in seine eigene' service' setzen. Am einfachsten wäre es jedoch, den gesamten d3-Code in eine eigene Funktion einzufügen, die direkt nach der Zeile "self.users = data;" aufgerufen wird und die Daten als Argument an diese Funktion weitergibt. Lmk, wenn Sie weitere Fragen haben. – Pytth

Sie unter Verwendung Mit Javascripts erreichen können benutzerdefinierte Ereignis Funktion

Wir brauchen ein Ereignis zu registrieren, global mit dem Dokument wie folgt

Ereignis Registrieren

document.addEventListener("updateUser", function(e) { 
    console.info("Event is: ", e); 
    console.info("Custom data is: ", e.detail); 
    // Place your logic to operate with new data 
})

Das obige Snippet muss in Ihrem d3-Skript platziert werden.

Emittieren des benutzerdefinierten Ereignisses

var myEvent = new CustomEvent("updateUser", { 
    detail: data // Your data from vuejs part 
}); 

// Trigger it! 
document.dispatchEvent(myEvent);

Quelle

2017-09-14 18:19:19

Antwort

Verwandte Themen