我一直在尝试将在简单D3中完美运行的代码传递给Vue。这部分代码应该更新条形图的标签文本，但是不起作用。这是data.csv：
country,population
China,2535
India,1654
United States,700
Indonesia,680
Brazil,1785
Total,1821
这是管理条形图的代码：
import formatCurrency from '../mixins/formatCurrency';
import formatTime from '../mixins/formatTime';
import {
select,scaleLinear,max,scaleBand,interpolate,axisLeft,axisBottom,forceX,csv,filter
} from 'd3';
//..
data: () => ({
dataset: [],dataFiltrada: [],}),//..
async mounted() {
let datos = await csv('/datasets/data.csv')
this.dataset = Object.freeze(datos)
//..
this.graph()
},computed: {
//..
filtrarData() {
this.dataFiltrada = this.dataset.filter(d => { return d.country !=='Total'})},},methods: {
graph(){
//..
const numeros = g.selectAll(this.label).data(this.dataFiltrada)
numeros
.enter().append("text")
.attr("class",this.label)
.attr('x',this.xEtiqueta)
.attr('y',d => { return -yScale(d.country); })
.attr('dy',this.yEtiqueta)
.text(0)
.merge(numeros)
.transition().duration(this.time)
.tween(this.label,d => {
var i = interpolate(1,d.population);
if (d.population != 0)
return function(t) {
select(this).text(d => {
return (this.label === 'labelg1')
? this.formatCurrency(i(t))
: this.formatTime(i(t))
}
//..
mixins: [
formatCurrency,formatTime,],}
过渡正常，但格式未更新。当我在function（t）之外使用任何值的console.log formatCurrency时，可以，但是在function（t）范围内不起作用。 formatCurrency函数是这样的：
import { format } from 'd3';
export default {
methods: {
formatCurrency:(() => {
var cantNum;
var formatofinal;
var simbol = "$";
function digits_count(n) {
var count = 0;
if (n >= 1) ++count;
while (n / 10 >= 1) {
n /= 10;
++count;
}
return count;
};
function processCantNumAndFormatOfinal(n){
if (digits_count(n) === 0) {
cantNum = 0;
formatofinal ='r';
}
else if (digits_count(n) === 1) {
cantNum = 1;
formatofinal ='s';
}
else if (digits_count(n) === 2) {
cantNum = 2;
formatofinal ='s';
}
else if (digits_count(n) === 3) {
cantNum = 3;
formatofinal ='s';
}
else if (digits_count(n) === 4) {
cantNum = 2;
formatofinal ='s';
}
else if (digits_count(n) === 5) {
cantNum = 3;
formatofinal ='s';
}
else if (digits_count(n) === 6) {
cantNum = 3;
formatofinal ='s';
}
else if (digits_count(n) === 7) {
cantNum = 2;
formatofinal ='s';
}
else if (digits_count(n) === 8) {
cantNum = 3;
formatofinal ='s';
}
else if (digits_count(n) === 9) {
cantNum = 3;
formatofinal ='s';
}
else {
cantNum = 2;
formatofinal ='s';
};
}
function formatear(n) {
// Process cantNum and formatofinal here ... function call
processCantNumAndFormatOfinal(n);
const formato = simbol + format(",."+ cantNum +formatofinal)(n)
.replace('.',',')
.replace('G','B');
return formato;
};
return function(n)
{
return formatear(n);
}
}
})()
}
我也尝试过箭头功能，但是数据变为零。
.merge(numeros)
.transition().duration(this.tiempo)
.tween(this.label,d => {
var i = interpolate(1,d.population);
if (d.population != 0)
return (t) => { //..}
已编辑：
现在我注意到了两件事：
- this.label在function（t）内部无法识别。当我进行转换时：
(this.label === 'labelg1')
对此：
(this.label != 'labelg1')
条件已被识别，但我现在收到的错误消息是：
Uncaught TypeError: _this3.formatCurrency is not a function
编辑2：
我更改了formatCurrency的方法，这是新的结构：
import { format } from 'd3';
export default {
methods: {
formatCurrency(n) {
let count = digitsCount(n)
let numeros = processCantNumAndFormatOfinal(count)[0]
let formatoF = processCantNumAndFormatOfinal(count)[1]
let final = formatear(numeros,formatoF,n)
console.log(final)
return final
}
}
}
function digitsCount(n) {
let count = 0;
if (n >= 1) ++count;
while (n / 10 >= 1) {
n /= 10;
++count;
}
return count;
}
function processCantNumAndFormatOfinal(n) {
let cantNum;
let formatofinal;
if (n === 0) {
cantNum = 0;
formatofinal ='r';
}
else if (n === 1) {
cantNum = 1;
formatofinal ='s';
}
else if (n === 2) {
cantNum = 2;
formatofinal ='s';
}
else if (n === 3) {
cantNum = 3;
formatofinal ='s';
}
else if (n === 4) {
cantNum = 2;
formatofinal ='s';
}
else if (n === 5) {
cantNum = 3;
formatofinal ='s';
}
else if (n === 6) {
cantNum = 3;
formatofinal ='s';
}
else if (n === 7) {
cantNum = 2;
formatofinal ='s';
}
else if (n === 8) {
cantNum = 3;
formatofinal ='s';
}
else if (n === 9) {
cantNum = 3;
formatofinal ='s';
}
else {
cantNum = 2;
formatofinal ='s';
}
return [cantNum,formatofinal]
}
function formatear(cantNum,formatofinal,n) {
let formato = format(",."+ cantNum + formatofinal)(n)
return formato;
}
对于组件：
<template>
</template>
<script>
import formatCurrency from '../mixins/formatCurrency';
import formatTime from '../mixins/formatTime';
//...
async mounted() {
let datos = await csv('/datasets/data.csv')
this.dataset = Object.freeze(datos)
this.dataNumero
this.filtrarData
this.graph()
this.formatearData
},//...
computed: {
//...
dataNumero() {
this.dataset.forEach( function(d) { return d.population = +d.population})
},filtrarData() {
this.dataFiltrada = this.dataset.filter(function(d) { return d.country !== 'Total'})
},formatearData() {
this.dataFiltrada.forEach( function(d) { return d.population = this.formatCurrency(d.population) })
},methods: {
graph() {
//..
const numeros = g.selectAll(this.label).data(this.dataFiltrada)
numeros
.enter().append("text")
.attr("class",this.label)
/* esto les da posición a las etiquetas en x e y */
.attr('x',this.xEtiqueta)
.attr('y',d => { return -yScale(d.country); })
.attr('dy',this.yEtiqueta)
.text(0)
/* esto agrega las transiciones */
.merge(numeros)
.transition().duration(this.tiempo)
.tween(this.label,function(d) {
var i = interpolate(1,d.population);
if (d.population != 0)
return function(t) {
select(this).text(Math.round(i(t)))
};
})
//..
mixins: [
formatCurrency,formatTime
],使用formatearData() {this.dataFiltrada.forEach(d => //..中的箭头功能，控制台显示结果正常，但是图表显示了当我更改formatearData()时删除所有大于3位数字的NaN值（?????）。箭头功能formatearData() {this.dataFiltrada.forEach(function(d) { d.population = //..，错误是：Error in mounted hook (Promise/async): "TypeError: Cannot read property 'formatCurrency' of undefined"下面是供参考的图像。
编辑3：
好吧，该功能不起作用的是d3格式，问题是我试图用特殊格式设置d3条形图的文本标签编号的格式，但是当这种情况发生时，这些数字将转换为字符串并呈现NaN值，所以相关的问题是：在补间过渡或其他方法期间，是否可以在vue中设置D3条形图标签数字的格式？因为该代码与简单的javascript和webpack完美配合，但是在vue中却是另一回事。 >