小编Nic*_*len的帖子

我正在处理一个 D3 项目，其中我有 JSON 格式的时间（分钟和秒），如下所示：

"Time": "36:50"

如何在 D3 图形的 y 轴上以该格式绘制时间？我应该使用d3.scaleTime还是d3.scaleLinear用于轴？如何制作minute:second以 JSON 格式显示时间的刻度？

编辑：
这是我迄今为止的尺度/轴：

  //Format data for X Axis
      var yearFormat = "%Y";
      var parsedYear = years.map(function(d) {
        return d3.timeParse(yearFormat)(d)
      });


      var x = d3.scaleTime()
                .range([0, width])
                .domain(d3.extent(parsedYear));


      // Format data for Y Axis
      var specifier = "%M:%S";
      var parsedTime = times.map(function(d) {
        return d3.timeParse(specifier)(d)
      })

      var y = d3.scaleTime()
                .range([height, 0])
                .domain(d3.extent(parsedTime));

      // X Axis
      g.append("g")
        .attr("transform", "translate(0," + height + …

我正在制作 D3 中的折线图，该折线图以从 API 检索的 JSON 格式显示数据。

我在 D3 的网站上找到了一个示例折线图项目，它看起来相对简单。该示例与我的项目之间的主要区别在于，该示例使用来自本地 csv 文件的数据，而不是来自 API 请求的 JSON。

// This needs to be changed to my API request
d3.tsv("data.tsv", function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", …

我正在使用 React-Bootstrap 并构建一个导航栏。我想用 Font Awesome 汉堡包图标替换 React-Bootstrap 汉堡包菜单图标。

如何更改内置汉堡菜单？这是我的导航栏：

<Navbar expand="lg">
   <Navbar.Brand href="#home">
      <FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" />
   </Navbar.Brand>
   <Navbar.Toggle aria-controls="basic-navbar-nav"/>
   <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
         <Nav.Link href="#home">Home</Nav.Link>
         <Nav.Link href="#link">Link</Nav.Link>
      </Nav>
   </Navbar.Collapse>
</Navbar>

我正在导入我想要使用的 Font Awesome 图标并像这样显示它：

    <FontAwesomeIcon icon="bars" color="#20FC8F" size="2x" />;

我如何使用它来代替 React-Bootstrap 切换器？

我刚开始使用 Material-UI。我想使用它的Fade 组件来淡入元素。我可以这样做：

<Fade in timeout={3000}>
    <Typography variant="h3" className={classes.h3} gutterBottom>About Me</Typography>
</Fade>

Fade 组件工作正常，但在页面加载时立即执行。如何延迟动画直到用户向下滚动到页面上元素所在的位置？onScroll我在文档中没有看到任何属性。Material-UI 是否提供了一种在滚动时执行淡入淡出的方法，或者我是否必须将另一个库与 Material-UI 结合使用？

我是 Leaflet/React-Leaflet 的新手，我正在尝试在地图上绘制圆形标记，但遇到了麻烦。React-Leaflet 的文档不是很好。我已经弄清楚如何添加点击时显示的弹出窗口。

这是我的代码：

    import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer, Tooltip, Circle } from 'react-leaflet';
import DivIcon from 'react-leaflet-div-icon';
import axios from 'axios';


export default class MapView extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      nasaLocations: [],
      spacexLocations: []
    };
  }

  componentDidMount() {
    axios.get(`https://data.nasa.gov/resource/gvk9-iz74.json`)
      .then(res => {
        const nasaData = res.data;
        this.setState({nasaLocations: nasaData})
        console.log(this.state.nasaLocations);
      })

    axios.get(`https://api.spacexdata.com/v2/launchpads`)
      .then(res => {
        const spacexData = res.data;
        this.setState({spacexLocations: spacexData})
        console.log(this.state.spacexLocations);
      })
  } …

I'm new to Redux and working on a project using the Spotify API. I'm sending API calls and retrieving data about the currently playing song.

I have a separate Redux action that is attempting to grab other albums from the currently playing artist. In my App.js I can access the id of the artist via const id = this.props.currentlyPlaying.id

I want to pass this variable from App.js to my album action. The action contains the API call and looks like …

我有一个 Gatsby 网站，并且正在实施 GDPR 同意横幅。我想将状态存储在本地存储中，其中包含与用户是否接受 GDPR 条款相关的“true”或“false”字符串。

例如，用户第一次访问该网站。在本地存储中，有一个“GDPR_Accepted”键设置为“false”。如果用户不接受主页上的 GDPR 条款，则横幅将继续显示在用户访问的每个页面上。当用户单击接受时，GDPR_Accepted 值设置为“true”，并且我的 React 组件中的三元运算符应用隐藏横幅的 CSS 类。

因为我使用的是本地存储，所以即使用户离开页面并稍后返回（假设他们没有清除浏览历史记录），“true”值也应该持续存在。问题出在盖茨比身上。Gatsby 使用服务器端渲染，当用户接受 GDPR 条款并离开网站并返回时，GDPR 值将重置为“false”。当设置为“true”时，Gatsby 无法保留之前的本地存储数据。

如何在 Gatsby 项目中将数据保存在本地存储中？仅使用 React 状态来存储用户是否接受 GDPR 条款是否更有意义？

我正在建立一个新的投资组合网站，希望它有一个联系表。该项目是用React构建的，我曾计划使用Formspree添加不带后端的联系表单。事实证明，除非您是付费订阅者，否则Formspree不再允许AJAX呼叫。

是否有类似于Formspree的联系表格的替代方法？我本来打算做这样的事情，但是由于Formspree的局限性而不能。

我对后端编程知之甚少，并且不希望仅出于连接联系表的原因就不必深入研究Node / Express。这是实用的，还是现在添加后端会更容易？

我是 Vue.js 的新手，并试图创建一个 src 文件路径包含变量的图像。我很难在 Vue.js 中进行连接。

我有这样的图像：

<img :src="'https://openweathermap.org/img/w/04d.png'"/>

我想连接 '04d.png' 部分，以便它是动态的并显示从 API 调用返回的任何图像。如何在 url 上添加变量？

我试过这个：

<img :src="'https://openweathermap.org/img/w/+${iconCode}'"/>

我尝试了一堆不同的单引号、双引号、反引号等组合……但没有任何效果。将变量连接到 Vue 中图像标签中的字符串 url 的正确方法是什么？

我试图在 React 项目中向这个https://www.themoviedb.org/documentation/api API发出请求，然后在我的网站上显示 JSON 数据。

我正在使用 Axios 发出请求，并且我已经能够发出请求并获取适当的 JSON 数据和 console.log 或在 Firefox 的 React 工具中查看它。但是，我很难在 ul 中显示数据。最初我有一个错误，与每个列表项都有一个唯一的键有关，我已经解决了这个问题（或者我相信）。

这是我的请求以及我如何尝试呈现数据：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=*apikeyhere*&language=en-US&page=1`)
      .then(res => {
        const posts = res.data.results.map(obj => [obj.title, obj.overview]);
        this.setState({ posts });
      });
  }

/*  render() {
    return (
      <div>
        <h1>Movie API data</h1> …

我正在使用一个 API，该 API 显示名为 CryptoCompare 的加密货币数据。我是一个 React 菜鸟，但我已经设法使用 Axios 来执行 AJAX 请求。但是，我无法访问我想要的 JSON 元素。

这是 JSON 的样子：https : //min-api.cryptocompare.com/data/all/coinlist

这是我的要求：

import React, { Component } from 'react';
import './App.css';
import axios from "axios";
var NumberFormat = require('react-number-format');

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      coinList: []
    };
  }



  componentDidMount() {
    axios.get(`https://min-api.cryptocompare.com/data/all/coinlist`)
    .then(res => {
      const coins = res.data;
      //console.log(coins);
      this.setState({ coinList: coins});
    });
  }



// Object.keys is used to map through the data. Can't map …

我对 React 比较陌生，正在开发 John Conway - Game of Life 应用程序。我Gameboard.js为棋盘本身（它是 的子项App.js）构建了一个功能组件，以及一个Square.js代表棋盘中单个方块的功能组件（并且是 的子项Gameboard和孙子App）。

在App我有一个调用的函数alive，当用户单击它时，我想更改单个方块的颜色。App也有一个 'alive' 属性，它的状态最初设置为 false，并alive在调用时将该属性更改为 true。

这是App.js：

import React, { Component } from 'react';
import './App.css';
import GameBoard from './GameBoard.js';
import Controls from './Controls.js';

    class App extends Component {
      constructor(props){
        super(props);

        this.state = {
          boardHeight: 50,
          boardWidth: 30,
          iterations: 10,
          reset: false,
          alive: false
        };
      }

      selectBoardSize = (width, …