如何将数据从Vue js方法范围传递到外部JS文件？

Question

这是我的vue js的组件代码

<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>

这是我的d3组合图表代码，这里是一个名为Data take values的变量，并在图表上显示。

现在，我想从 self.users （vue js组件）获取数据，以便将其传递给数据变量（外部函数）。你能告诉我可能的方法吗？

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);

Answer 1

您可以使用使用Javascript的自定义事件功能

来实现

我们需要在全球范围内注册一个事件，文件如下

注册活动

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
})

上面的代码段需要放在你的d3脚本中。

发出自定义事件

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

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