小编Eni*_*aRM的帖子

我正在努力让快速导航正常工作.它浮在一边.当他们点击链接时,会将他们带到页面上的该ID.我正在关注Treehouse的这个指南.这就是我对滚动的看法:

$("#quickNav a").click(function(){
    var quickNavId = $(this).attr("href");
    $("html, body").animate({scrollTop: $(location).offset().top}, "slow");
    return false;
});

我最初放在它之前</body>.但是我似乎遇到了一个竞争条件,那就是在quickNav编译之前触发它(它有一个ng-hide放置它,不确定是否导致它 - 但它在DOM内).

如果我在控制台中运行该代码块,则滚动按预期工作.

我认为将它移入控制器更有效 - 或者更有可能在指令中.但我没有幸运完成那件事.如何让这块代码与AngularJS一起使用？

第一次真正使用伪:after选择器.不确定我遇到的问题是否是对它的限制,或者我只是遗漏了一些明显的问题.

这是我的实时代码.

li.current:after {
    border-width: 1px 1px 0 0;
    content: ' ';
    background: #256f9e;
    display: block;
    height: 13px;
    position: absolute;
    width: 10px;
    top: 6;
    margin:0px auto;
    z-index: 99;
    transform: rotate(-224deg);
    -webkit-transform: rotate(-224deg);
    -moz-transform: rotate(-224deg);
    -ms-transform: rotate(-224deg);
    -o-transform: rotate(-224deg);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    text-align: center;
    float: center;
}

我创建了一个小三角形(或者说是一个旋转成三角形的盒子).我希望它在中心内部,<li></li>但无法使用我的常规方法解决它.失败的事情(没有特别的顺序):

text-align: center;
float: center;
margin: 0 auto;
margin-right: 0;
margin-left: 0;

我错过了什么？我怀疑这很重要,但我正在使用AngularJS.我想如果Angular和Pseudo选择器之间存在已知的冲突(我怀疑),我会提到它.谢谢.

我的x轴目前有编号的刻度.我希望将ticks替换为来自我对象的数据(特别是关键字值).我怎么做到这一点？

我有一个工作小提琴

var dataset = [
            {"keyword": "payday loans", "global": 1400000, "local": 673000, "cpc": "14.11"},
            {"keyword": "title loans", "global": 165000, "local": 160000, "cpc": "12.53" },
            {"keyword": "personal loans", "global": 550000, "local": 301000, "cpc": "6.14"},
            {"keyword": "online personal loans", "global": 15400, "local": 12900, "cpc": "5.84"},
            {"keyword": "online title loans", "global": 111600, "local": 11500, "cpc": "11.74"}
        ];

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
// xAxis
svg.append("g") // Add the X Axis
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (h) + ")") …

我有一个成对分组的垂直条形图.我试图玩弄如何水平翻转它.在我的例子中,关键字将出现在y轴上,并且比例将出现在x轴上.

我尝试切换各种x/y变量,但这当然只是产生了时髦的结果.我需要关注哪些代码区域才能将其从垂直条切换到水平条？

My JSFiddle: Full Code

var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, w], 0.05);

// ternary operator to determine if global or local has a larger scale
var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return (d.local > d.global) ? d.local : d.global;
})])
    .range([h, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickFormat(function (d) {
        return dataset[d].keyword;
    })
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(5);

var commaFormat = d3.format(',');

//SVG element
var svg = d3.select("#searchVolume")
    .append("svg")
    .attr("width", w + …

我有一个包含数字和值的文本混合的对象.numbers当它是一个数字(显然)时,我想将过滤器应用于对象的值.但是当它不是一个数字时,我会好起来只是吐出字符串.应用于| number值格式化数字,但将字符串值保留为空(毕竟,它们不是数字).

我猜它必须是一个自定义过滤器(我还需要制作).有没有办法在做HTML时只在HTML中做ng-repeat？

<table>
      <tr ng-repeat="(metric, metricData) in data">
        <td>{{metric}}</td>
        <td>{{metricData | number}}</td>
      </tr>
</table>

$scope.data = { name:"this is the name", 
                score:48
                outcome:"as expected",
                attendance:820,
                total:212.34
              };

我刚刚发现了user-selectCSS 的属性.我想找到一种方法让人们在页面上复制显示的结果,而不复制标题(以及其他一些东西).每个浏览器在尝试选择某些内容时都会有所不同.但我一直在测试Chrome.小提琴代码

HTML

<div>
    <span class="no-select heading">Heading 1 - can't select it</span>
    <p>This text you can select & copy.</p>
    <span class="no-select heading">Heading 2 - can't select it</span>
    <p>This text you can select & copy.</p>
</div>

CSS

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

结果:

对我来说,看起来他们只能复制突出显示的文本.但是,在复制突出显示的内容时 - 它确实有heading 2,但它没有复制heading 1.为什么是这样？

This text you can select & copy.

Heading 2 - can't select it
This text …

我正在尝试为AngularJS编写我的第一个自定义过滤器.我想要能够识别某些东西是字符串还是数字.如果它是一个数字,它使用内置过滤器进行格式化| number.

我目前有一个解决方法ng-if:

HTML

<table>
   <tr ng-repeat="(key, val) in data">
      <td>{{key}}</td>
      <td ng-if="isNumber(val)">{{val | number}}</td>
      <td ng-if="!isNumber(val)">{{val}}</td>
   </tr>
</table>

控制器:

$scope.data = { 
    One:55689, 
    two:"consider all the options",
    three:800243,
    four:"all over",
    five:"or just beginning"
  };

  $scope.isNumber = function (value) {
    return angular.isNumber(value);
  };

我认为将它分配为自己的过滤器是一个更好的解决方案.这是我到目前为止(是的,我知道这是骨头...这是我的第一个).

.filter('textOrNumber',function(){
    return function (input) {
        if(typeof input === 'number'){
            console.log("I'm a number");
            //return as formatted number
        } else {
            console.log("Not a number");
            //do nothing, just return
        };
        return input;
    };
}) …

我正在探索NVD3.js库.令我惊讶的是,它能在多快的速度下生成.

但有时似乎很难改变图表.在这种情况下,我想为我的图表添加标题.

另外,我想在工具提示中添加其他数据.所以在悬停时,它还会在我的数据中包含注释.

数据样本:

var data = [
{
  key: "Loans",
  y: 52.24
  note: "Expect greatest value"
}];

这是我正在玩的代码:

nv.addGraph(function() {

var width = 500,
    height = 500;

var chart = nv.models.pieChart()
    .x(function(d) { return d.key; })
    .values(function(d) { return d; })
    .color(d3.scale.category10().range())
    .width(width)
    .height(height)
    .donut(true);

chart.pie
    .startAngle(function(d) { return d.startAngle/2 -Math.PI/2; })
    .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 ;});


  d3.select("#chart")
      //.datum(historicalBarChart)
      .datum([data])
    .transition().duration(1200)
      .attr('width', width)
      .attr('height', height)
      .call(chart);

return chart;
});

更新: 工具提示的原始代码位于src->models->pieChart.js:

tooltip …

我有一个二维数组。我正在尝试计算内部数组中的值。我知道JS array.length。但是这样做会testData.length产生5。这是正确的。但是，我想计算每个子数组中的项目数。

testData[0].length将产生6。但是如何动态计算每个子数组？（因为它会改变）。

var testData = [["column1","test1","test1","tea","party", "water bottle"],
                ["column2","test2","test2","test2 test2"],
                ["column3","test2","test2","test2 test2 "],
                ["column4","test2","test2 test2f asdfsdf"],
                ["column5","test2","test2 test2f asdfsdfasdfasdfasa asda asdfsas"]
]

我不完全确定如何研究这个想法.我确信它已经完成了,但是我有一个问题是为了有效的谷歌搜索.

我有一个结果页面,可以选择将结果下载到csv.但我想有时候用户宁愿只是在页面上复制并粘贴可见结果.如何在复制/粘贴时获得它,它只显示结果而不显示标题.

<h1>results #1</h1>
<p>here are all of your awesome results</p>
<p>here are all of your awesome results</p>
<span> showing 2 of 2 </span>

所以在我的示例代码中,他们只复制<p>元素而不是<h1>或<span>.

我认为这将是一个javascript/jquery解决方案,我很好.但实际上还不确定从哪里开始.这可以合理地完成吗？