首页 / JAVASCRIPT / 使用D3 / JavaScript更改所选li选项的颜色

使用D3 / JavaScript更改所选li选项的颜色

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用D3 / JavaScript更改所选li选项的颜色，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7912字，纯文字阅读大概需要12分钟。

内容图文

我正在使用D3.js创建一个唯一值列表(来自JSON查询),我想更改所选li的文本颜色.在该片段下面给出了执行此操作的功能.我的问题是,当我点击列表中的另一个值时,颜色不会重置.

//JSON Data
const data = [
{
    "date": "2008-11",
    "Value": "A",
    "num": 7.8
  },
  {
    "date": "2007-11",
    "Value": "B",
    "num": 7.8
  }
];

//Parses date for correct time format
var parseDate = d3.time.format("%Y-%m").parse;

//Format data for the filter list (or dropdown) function
function formatData(data) {

  var valueMap = {}; 
  var mainFields = ["date", "num"]; 
  data.forEach(function(d) {
    d.num = +d.num;

    var Value = d.Value; 
    valueMap[Value] = []; 
    mainFields.forEach(function(field) { 
      valueMap[Value].push(d[field]); 
    }); 
  });

  return valueMap;
}

//Dropdown creation function
function dropDown() {

  // Handler for dropdown value change
  const valueMap = formatData(data);
  var dropdownChange = function(d) {
  
    d3.select("svg").remove();
    const newData = data.filter(function(item){
   			return item.Value == d;
  	});
    
    //Changes text color for the selected li option
    d3.select(this).style("color", "#c7003b");
 
  };

  // Get names of Values, for dropdown 
  var campaigns = Object.keys(valueMap).sort(); 

  var dropdown = d3.select("#dropdown") 
    .insert("ul", "svg") 
    .classed('selector', true) 


  dropdown.selectAll("li") 
    .data(campaigns) 
    .enter().append("li") 
     .attr("id", (function(d) { 
      return d[0].toUpperCase() + d.replace(/_/g, ' ').slice(1, d.length); 
    }))
    .text(function(d) { 
      return d[0].toUpperCase() + d.replace(/_/g, ' ').slice(1, d.length); 
    }) 
    .on("click", dropdownChange);
    


  var initialData = valueMap[campaigns[0]]; 

  
}


dropDown();
/*css to go here*/

  body {
    font-family: 'Proxima-Nova', sans-serif;
    font-size: 12px;
  }

  .flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
  }

  .flex-item1 {
    width: 33%;
    height: auto;
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
  }

  .flex-item2 {
    width: 67%;
    height: auto;
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
  }

  .g-hed {
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 22px;
    margin: 3px 0;
  }

  .g-source-bold {
    text-align: left;
    font-size: 10px;
    font-weight: bold;
  }

  .g-source {
    margin: 10px 0;
  }

  .g-source-bold {
    text-align: left;
    font-size: 10px;
  }

  .g-intro {
    font-size: 16px;
    margin: 0px 0px 10px 0px;
  }

  .g-labels {
    font-family: 'Proxima-Nova', sans-serif;
    fill: white;
    font-weight: bold;
    font-size: 14px;
  }
  .g-chart {
      height: 100%;
  }
  .g-chart svg {
    width: 100%;
    height: 100%;
  }

  .axis line {
    fill: none;
    stroke: #ccc;
    stroke-dasharray: 2px 3px;
    shape-rendering: crispEdges;
    stroke-width: 1px;
  }

  .axis text {
    font-family: 'Proxima-Nova', sans-serif;
    font-size: 13px;
    pointer-events: none;
    fill: #7e7e7e;
  }

  .y.axis text {
    text-anchor: end !important;
    font-size: 14px;
    fill: #7e7e7e;
  }

  .domain {
    display: none;
  }

  .line {
    stroke: #2f5491;
    stroke-width: 3px;
    fill: none;
  }

  .overlay {
    fill: none;
    pointer-events: all;
  }

  .focus {
    font-size: 14px;
  }

  .focus circle {
    fill: #5e8dc9;
  }

  ul {
    padding: 0;
    list-style-type: none;
  }

  .selector li {
  padding: 20px 0 20px 0;
	border-top: 1px solid #ffffff;
	border-bottom:3px solid #e0e0e0;
	background: #fff;
 
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>


<ul class="flex-container">
  <li class="flex-item1">
    <div id="dropdown"></div>
  </li>
  <li class="flex-item2">

    <h5 class="g-hed"></h5>
    <p class="g-intro"></p>
    <div class="g-chart"></div>
    <div class="g-source"><span class="g-source-bold"></span><span class="g-source-reg"></span>
    </div>

  </li>
</ul>

必须改变的功能.我需要在每次点击时重置CSS,并为选定的li再次更改颜色：

  var dropdownChange = function(d) {

    d3.select("svg").remove();
    const newData = data.filter(function(item){
            return item.Value == d;
    });

    //Changes text color for the selected li option
    d3.select(this).style("color", "#c7003b");

  };

解决方法:

不是使用样式属性来内联应用css,而是将css类应用于元素;然后,您可以轻松更改显示“活动”元素的方式,而无需深入了解JS代码.

假设您要为当前选择的任何元素添加一个活动类.

激活dropdownChange时,您希望删除任何现有的活动类,并添加激活触发dropdownChange的元素.令人高兴的是,这是设置为触发事件的元素,因此您可以从那里轻松地工作：

// get the parent ul element, remove the `active` class from all children
this.parentNode.childNodes.forEach( (e) => {
  e.classList.remove('active');
} );
// add `active` to the element that triggered the function
this.classList.add('active');

原位：

//JSON Data
const data = [{
    "date": "2008-11",
    "Value": "A",
    "num": 7.8
  },
  {
    "date": "2007-11",
    "Value": "B",
    "num": 7.8
  }
];

//Parses date for correct time format
var parseDate = d3.time.format("%Y-%m").parse;

//Format data for the filter list (or dropdown) function
function formatData(data) {

  var valueMap = {};
  var mainFields = ["date", "num"];
  data.forEach(function(d) {
    d.num = +d.num;

    var Value = d.Value;
    valueMap[Value] = [];
    mainFields.forEach(function(field) {
      valueMap[Value].push(d[field]);
    });
  });

  return valueMap;
}

//Dropdown creation function
function dropDown() {

  // Handler for dropdown value change
  const valueMap = formatData(data);
  var dropdownChange = function(d) {

    d3.select("svg").remove();
    const newData = data.filter(function(item) {
      return item.Value == d;
    });

    // get the parent ul element, remove `active` class from children
    this.parentNode.childNodes.forEach( (e) => {
      e.classList.remove('active');
    } );
    // mark this node as active
    this.classList.add('active');

  };

  // Get names of Values, for dropdown 
  var campaigns = Object.keys(valueMap).sort();

  var dropdown = d3.select("#dropdown")
    .insert("ul", "svg")
    .classed('selector', true)


  dropdown.selectAll("li")
    .data(campaigns)
    .enter().append("li")
    .attr("id", (function(d) {
      return d[0].toUpperCase() + d.replace(/_/g, ' ').slice(1, d.length);
    }))
    .text(function(d) {
      return d[0].toUpperCase() + d.replace(/_/g, ' ').slice(1, d.length);
    })
    .on("click", dropdownChange);



  var initialData = valueMap[campaigns[0]];


}


dropDown();
/*css to go here*/

body {
  font-family: 'Proxima-Nova', sans-serif;
  font-size: 12px;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item1 {
  width: 33%;
  height: auto;
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}

.flex-item2 {
  width: 67%;
  height: auto;
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}

.g-hed {
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 22px;
  margin: 3px 0;
}

.g-source-bold {
  text-align: left;
  font-size: 10px;
  font-weight: bold;
}

.g-source {
  margin: 10px 0;
}

.g-source-bold {
  text-align: left;
  font-size: 10px;
}

.g-intro {
  font-size: 16px;
  margin: 0px 0px 10px 0px;
}

.g-labels {
  font-family: 'Proxima-Nova', sans-serif;
  fill: white;
  font-weight: bold;
  font-size: 14px;
}

.g-chart {
  height: 100%;
}

.g-chart svg {
  width: 100%;
  height: 100%;
}

.axis line {
  fill: none;
  stroke: #ccc;
  stroke-dasharray: 2px 3px;
  shape-rendering: crispEdges;
  stroke-width: 1px;
}

.axis text {
  font-family: 'Proxima-Nova', sans-serif;
  font-size: 13px;
  pointer-events: none;
  fill: #7e7e7e;
}

.y.axis text {
  text-anchor: end !important;
  font-size: 14px;
  fill: #7e7e7e;
}

.domain {
  display: none;
}

.line {
  stroke: #2f5491;
  stroke-width: 3px;
  fill: none;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus {
  font-size: 14px;
}

.focus circle {
  fill: #5e8dc9;
}

ul {
  padding: 0;
  list-style-type: none;
}

.selector li {
  padding: 20px 0 20px 0;
  border-top: 1px solid #ffffff;
  border-bottom: 3px solid #e0e0e0;
  background: #fff;
}
.active {
  color: #c7003b
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>


<ul class="flex-container">
  <li class="flex-item1">
    <div id="dropdown"></div>
  </li>
  <li class="flex-item2">

    <h5 class="g-hed"></h5>
    <p class="g-intro"></p>
    <div class="g-chart"></div>
    <div class="g-source"><span class="g-source-bold"></span><span class="g-source-reg"></span>
    </div>

  </li>
</ul>

内容总结

以上是互联网集市为您收集整理的使用D3 / JavaScript更改所选li选项的颜色全部内容，希望文章能够帮你解决使用D3 / JavaScript更改所选li选项的颜色所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/774058.html

来源：【匿名】