D3-将变量传递给x刻度 [英] D3 - Passing variable to x scale

问题描述

我在这里有一个Codepen- https://codepen.io/anon/pen/yvgJKB

I have a codepen here - https://codepen.io/anon/pen/yvgJKB

我有一个简单的堆积条形图.

I have a simple stacked bar chart.

我想把它变成一个组件，所以我需要传递值以使其可重用

I want to make this into a component so I need to pass in the values to make it reuseable

x缩放函数返回d.date

let x = d3.scaleBand()
    .domain(dataToStack.map(function(d){
        return d.date;
    }))
    .rangeRound([0,width])
    .padding(0.05);

我想从变量中传递日期"部分

I want to pass the 'date' part in from a variable

我可以对条形的x属性进行此操作.

I can do this for the x attr of the bar.

let xAxisValue = 'date'

.attr('x', (d, i) => {
    let link = d.data[xAxisValue];                         
    return x(link)
})

我还需要将其传递给x比例尺

I also need to pass this into the x scale

let x = d3.scaleBand()
    .domain(dataToStack.map(function(d){
        //let link = d.[xAxisValue];                         
        //return x(link)
        return d.date;
    }))
    .rangeRound([0,width])
    .padding(0.05);

相同的方括号在这里不起作用.

The same square brackets dont work here.

如何将xAxisValue传递给x缩放功能.

How can I pass in the xAxisValue to the x scale function.

推荐答案

let xAxisValue = 'date';

在第1行中使代码笔示例正常工作.

in line 1 to make the codepen sample working.

然后

let x = d3.scaleBand()
.domain(dataToStack.map(function(d){
    let link = d[xAxisValue];                         
    return link;
    //return d.date;
}))
.rangeRound([0,width])
.padding(0.05);

当我在您的Codepen示例中对其进行修改时，它就可以工作.

It works when I modify it in your codepen sample.

这篇关于D3-将变量传递给x刻度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！