小编DeB*_*aid的帖子

我的目标是使用d3将图像添加到现有圆圈中.圆圈将呈现并与鼠标悬停方法交互,但仅当我使用"填充","颜色",而不是像.append("image")那样更复杂的东西.

      g.append("circle")
         .attr("class", "logo")
         .attr("cx", 700)
         .attr("cy", 300)
         .attr("r", 10)
         .attr("fill", "black")       // this code works OK
         .attr("stroke", "white")     // displays small black dot
         .attr("stroke-width", 0.25)
         .on("mouseover", function(){ // when I use .style("fill", "red") here, it works 
               d3.select(this)        
                   .append("svg:image")
                   .attr("xlink:href", "/assets/images/logo.jpeg")
                   .attr("cx", 700)
                   .attr("cy", 300)
                   .attr("height", 10)
                   .attr("width", 10);
         });

鼠标悬停后图像不显示.使用Ruby on Rails应用程序,我的图像"logo.jpeg"存储在assets/images /目录中.有什么帮助让我的徽标显示在圈内？谢谢.

使用d3 js格式化此时间序列图表的x轴时遇到问题.

这是一个工作示例:http://tributary.io/inlet/7798421

问题:我只能在x轴上看到1个日期(标签),无论指定的总刻度数是多少.如何以4-6刻度在x轴上显示时间？

编辑:谢谢Lars的解决方案.

这是我在UTC的时间:

var data = [
    {"time": 1387212120, "open": 368, "close": 275, "high": 380, "low": 158},
    {"time": 1387212130, "open": 330, "close": 350, "high": 389, "low": 310},
    {"time": 1387212140, "open": 213, "close": 253, "high": 289, "low": 213}];

data.forEach(function(d){ d.time = new Date(d.time * 1000) });

然后d3以默认格式接受它,或者您可以自定义.

在d3中制作条形图.我有30多个条形,x轴上有30多个相应的标签.我希望在页面加载时隐藏x轴标签(这是有效的),只有当用户游标在相应的栏(svg rect对象)上时才显示.为此,我为每个rect和每个文本元素分配一个id.当用户游标超过rect时,仅显示所选(鼠标悬停)矩形的文本.

我可以为rects分配id,但不能为text分配id.码:

      svg.selectAll("rect")
         .data(dataset)
         .enter()
         .append("rect")
            .attr("id", function(d){   
                return d.slug;        // slug = label downcased, this works
            });                       // each rect has unique id

但是,x轴上我的文本元素的类似代码不会分配ID？!

    svg.append("g")
      .call(xAxis)
      .selectAll("text")
        .attr("id", function (d){    // inspect text element shows no ID.
           return d.slug;            // text doesn't have any id
        })
     .style("text-anchor", "end")
     .attr("opacity", 0.2);

如何在x轴上为文本元素指定唯一ID？谢谢!

我的应用程序中有主页,联系页面和其他几个与产品相关的页面.

目标是将背景图像应用于ONLY特定路线:/homepage和/contact.如果用户离开任一路线,请应用一些css更改.

我现在正在我的主页上用帮助器一起攻击这个,如下所示:

Template.homepage.rendered = function () {

    var route = Router.current();

    if ( route.path == '/' ) {

        document.body.className = "showBackgroundImage";

    }
};

部分胜利在这里,因为这将激活css,但我需要在路线改变时停用.我也尝试了以下内容router.js:

this.route('homepage', {
    path: '/', 
    onAfterAction: function  (argument) {
       // add a class name to body
       document.body.className = "showBackgroundImage";
    }
  });

和CSS在后台标准:

.showBackgroundImage { 
  background: url(bgImage.jpg) no-repeat center center fixed; 
}

尝试使用browserHistory.push方法以编程方式更改我的路线。

它将更改路由（每个浏览器地址栏）但不会更新视图。

这是我的代码 App.jsx

const AppStart = React.createClass({

  render: function() {
    return (
      <MuiThemeProvider>
        <Router history={hashHistory}>
          <Route path="/" component={Main}>
            <Route path="experiences" component={Experiences} />
            <Route path="people" component={Profiles} />
            <Route path="login" component={Login} />
            <IndexRoute component={Home}/>
          </Route>
        </Router>
      </MuiThemeProvider>
    );
  }
});

ReactDOM.render(
  <AppStart />,
  document.getElementById('app')
);

成分：

handleLoginRedirect(e) {
    browserHistory.push('/experiences');
  },

  render() {
    return (
      <div className='row'>
        <div className='col-sm-10 col-sm-offset-1'>
          <form role='form'>
           <RaisedButton label="Redirect" onClick={this.handleLoginRedirect} />
          </form>
        </div>
      </div>
    );

我有以下代码，

const Layout: React.FC<LayoutProps> = ({ children }) => {
    const darkMode = useRecoilValue(darkModeAtom)
    
    console.log('darkMode: ', darkMode)
    return (
        <div className={`max-w-6xl mx-auto my-2 ${darkMode ? 'dark' : ''}`}>
            <Nav />
            {children}
            <style jsx global>{`
                body {
                    background-color: ${darkMode ? '#12232e' : '#eefbfb'};
                }
            `}</style>
        </div>
    )
}

我正在使用 recoil 和recoil-persist。那么，当 darkMode 值为 true 时，className 应该包含一个 dark 类，对吧？但事实并非如此。我不知道这里出了什么问题。但是第一次刷新的时候不行，之后就正常了。我还尝试使用 darkMode === true 条件，但它仍然不起作用。您会看到样式化的 jsx，效果很好。这随着 darkMode 值的变化而变化，当我刷新时，它会保留数据。但是当我检查时，我没有在第一个 div 中看到黑暗类。另外，当我 console.log darkMode 值时，我看到 true，但不包括 dark 类。

这是沙盒链接

也许这是一个愚蠢的错误，但我在这上面浪费了很多时间。那么我在这里做错了什么？

使用时react-hook-form我需要将任意数据传递到onSubmit函数中。示例代码：

function App() {
  const { register, handleSubmit } = useForm();
  const navigation = { foo: 'bar' }; // object to pass
  const onSubmit = (data) => {
    // how to access navigation here?
    console.log(data);
    console.log(navigation); // undefined
  }; 
  return (
    <form onSubmit={handleSubmit(onSubmit)}> // <<== pass navigation here as arg? 
      <input defaultValue="test" {...register("example")} />
      <input type="submit" />
    </form>
  );
}

我怎样才能把我的对象navigation为onSubmit？

我有 3 个类似的 javascript 对象。

var gdp = {
    "city": city,
    "gdp": [],  
};

var income = {
    "city": city,
    "income": [],  
};

var uRate = {
    "city": city,
    "uRate": [],  
};

我有很多城市（n = 28），并且[]是我的整数数据数组，每个整数的长度一致：gdp, income, uRate。

目标：将这些组合成每个城市的单个对象：

var finalData = {
    "city": city, 
    "gdp": [],
    "income": [],
    "uRate": [] 
}

我尝试了以下变体。

if ( ObjA.city == ObjB.city ) { Obj.city.metric = this.metric] };

或者，如果city 匹配，则将指标（gdp、收入或 uRate）添加到finalData对象中。

cities.forEach(function ( city ) { …

我有3个人,每个人对同一个问题都有独特的答案.

1个模板显示名称和问题.另一个不同的模板是答案.(4个模板.1个用于名称/问题,3个其他 - 每个唯一答案1个).

<template name="people">

  {{#each profile }}

    <h2>{{ name }}</h2>
    <p>{{ question }}</p>    

    <p>{{> answer }}</p> 

  {{/each }}

</template>

我想设置一个帮助器,这样当每个profile循环运行时,我可以插入正确的命名模板(而不是{{> answer }}3个不同的模板,由他们的名字识别{{> nameAnswers }},也就是说{{> fooAnswers }}.

试过这个,每个显示3个profile,而不是1个profile.

<template name="people">

  {{#each profile }}

    <h2>{{ name }}</h2>
    <p>{{ question }}</p>              

            {{#if nameHelper=Fred }}  
              {{> fredAnswers }}
            {{/if }}

            {{#if nameHelper=Ringo }}  
              {{> ringoAnswers }}
            {{/if }}  

            {{#if nameHelper=Jackson }}  
              {{> jacksonAnswers  }}
            {{/if }} 
  {{/each }}

</template>

注意: …