我从本地示例构建了以下JS Bin：https://jsbin.com/xocopal/edit?html，控制台，输出
然而，在我的localhost中，确实显示了一个图表，但JS Bin上没有发生任何事情。这是完整的代码，我不知道问题来自哪里：
<script type="text/babel">
const { combineReducers, createStore } = Redux;
const { Provider, connect } = ReactRedux;
const { Component } = React;
const { render } = ReactDOM;
const { scaleLinear } = d3;
const { select } = d3;
const { line } = d3;
const { shape } = d3;
const { axisBottom, axisLeft } = d3;
//========================Data
var all = [
{x: 'a', y: 20},
{x: 'b', y: 14},
{x: 'c', y: 12},
{x: 'd', y: 19},
{x: 'e', y: 18},
{x: 'f', y: 15},
{x: 'g', y: 10},
{x: 'h', y: 14}
];
var filtered = [
{x: 'a', y: 9},
{x: 'b', y: 5},
{x: 'c', y: 6},
{x: 'd', y: 12},
{x: 'e', y: 10},
];
//========================Reducers
const ChartData = (state = all, action) => {
switch (action.type) {
case 'DATA_CHART_ALL':
return { all: update(state.all, {$set: all})}
case 'DATA_CHART_FILTER':
return { all: update(state.filtered, {$set: filtered})}
default:
return state;
}
};
const todoApp = combineReducers({ChartData});
//=====================Components
class Rect extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<rect className="bar"
height={this.props.height}
y={this.props.y}
width={this.props.width}
x={this.props.x}
>
</rect>
);
}
};
Rect.defaultProps = {
width: 0,
height: 0,
x: 0,
y: 0
}
class Bar extends React.Component {
constructor(props) {
super(props);
}
render() {
var props = this.props;
var data = props.data.map(function(d) {
return d.y;
});
var yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, this.props.height]);
var xScale = d3.scaleOrdinal()
.domain(d3.range(this.props.data.length))
.range([0, this.props.width], 0.05);
var bars = data.map(function(point, i) {
var height = yScale(point),
y = props.height - height,
width = xScale.rangeBand(),
x = xScale(i);
return (
<Rect height={height}
width={width}
x={x}
y={y}
key={i} />
)
});
return (
<g>{bars}</g>
);
}
};
class Chart extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<svg width={this.props.width}
height={this.props.height} >
{this.props.children}
</svg>
);
}
};
class Axis extends React.Component {
constructor(props) {
super(props);
}
render() {
return <g></g>
}
};
var all = [];
class Chartapp extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>
<hr/>
<Chart width={this.props.width}
height={this.props.height}>
<Bar data={this.props.datatest}
width={this.props.width}
height={this.props.height} />
</Chart>
</div>
</div>
);
}
};
Chartapp.defaultProps = {
width: 500,
height: 500,
}
function mapStateToProps(state) {
return {
datatest: state.ChartData
};
};
const mapDispachToProps = (dispatch) => {
return {
ChartData: () => {dispatch (datachartFilter());
},
};
};
const AppChart = connect(mapStateToProps,mapDispachToProps)(Chartapp);
//=====================Action
function datachartAll() {
return {
type: DATA_CHART_ALL
};
}
function datachartFilter() {
return {
type: DATA_CHART_FILTER
};
}
//=====================Client.js
const App = () => (
<div>
<AppChart />
</div>
);
const store = createStore(todoApp);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
</script>
我已经设置了整个Redux/React/d3的东西，但我还没有实现这个按钮。我只是用控制台手动调度操作。
大约进行到一半时，您正在设置已绑定到状态的var all = []，从而有效地改变状态。不过，解决这个问题只会发现其他问题。
我可以建议你稍微清理一下代码，正确缩进并将其放在JS窗格中，这样你就可以突出显示语法了。删除问题的"下游"部分(例如，如果您的状态是空数组，则不需要页面上的七个其他组件(。让一些东西发挥作用，然后添加一个组件，然后添加另一个，以此类推
使用较小的代码块，您会得到更好的答案。