2c:null 2d:["$","title",null,{"children":"FuzzyCut | llqsee | Observable"}] 32:T4c2,myTableSpeed = { debugger; let inputData = result.dataCategory.overlapData.map((d) => { let a = {}; a.Min = d.edgeMin.toFixed(3); a.Max = d.edgeMax.toFixed(3); a["Membership Degree"] = Number(d.membershipValue).toFixed(2); a.Id = d.id; a.Name = d.name; return a; }); // data const div = d3.select(html`

d) .style("font-weight", "bold") .attr("text-align", "center"); const rows = table .selectAll(".row") .data(inputData) .enter() .append("tr") .attr("class", "row") .attr("text-align", "center"); const cells = rows .selectAll(".cell") .data((d) => Object.values(d)) .enter() .append("td") .attr("class", "cell") .text((d) => d) .attr("text-align", "center"); return div.node(); }33:T3eab,function fuzzyCut(data, attribute) { let n = 3; var lambda = 0; var widthLegend = width * 0.7; var heightLegend = 200; var logData = []; var dataNewAttribute = []; var dataCategory; var mmbshpPara = { color: colorArrFun(n), n: n, core: (d3.max(data.map(d => d[attribute]).map(d => +d)) * 1.01 - (d3.min(data.map(d => d[attribute]).map(d => +d)) - Math.abs(d3.min(data.map(d => d[attribute]).map(d => +d)) * 0.01))) / (n * 2), support: ((((d3.max(data.map(d => d[attribute]).map(d => +d)) * 1.01 - (d3.min(data.map(d => d[attribute]).map(d => +d)) - Math.abs(d3.min(data.map(d => d[attribute]).map(d => +d)) * 0.01))) / n - (d3.max(data.map(d => d[attribute]).map(d => +d)) * 1.01 - (d3.min(data.map(d => d[attribute]).map(d => +d)) - Math.abs( d3.min(data.map(d => d[attribute]).map(d => +d)) * 0.01 ))) / (n * 2)) * 2 + (d3.max(data.map(d => d[attribute]).map(d => +d)) * 1.01 - (d3.min(data.map(d => d[attribute]).map(d => +d)) - Math.abs( d3.min(data.map(d => d[attribute]).map(d => +d)) * 0.01 ))) / (n * 2)) * 2.5) / 3, lambda: lambda, max: Math.max(...data.map(d => d[attribute])), // d3.max(data.map(d => d[attribute]).map(d => +d)), min: Math.min(...data.map(d => d[attribute])), // d3.min(data.map(d => d[attribute]).map(d => +d)) - // Math.abs(d3.min(data.map(d => d[attribute]).map(d => +d))), // intercom: (max - min) / n - core intercom: (d3.max(data.map(d => d[attribute]).map(d => +d)) * 1.01 - (d3.min(data.map(d => d[attribute]).map(d => +d)) - Math.abs(d3.min(data.map(d => d[attribute]).map(d => +d)) * 0.01))) / n - (d3.max(data.map(d => d[attribute]).map(d => +d)) * 1.01 - (d3.min(data.map(d => d[attribute]).map(d => +d)) - Math.abs(d3.min(data.map(d => d[attribute]).map(d => +d)) * 0.01))) / (n * 2), attributeCut: attribute, widthLegend: widthLegend, heightLegend: heightLegend }; debugger; // Sliders n, lambda, core and support configuration------------------------------------------------- let nValue = html``; let nValueText = html` ${nValue.value}`; let nValueLabel = html`

`; let lambdaValue = html``; let lambdaValueText = html` ${lambdaValue.value}`; let lambdaValueLabel = html`
lambda
`; let sliderCore = html``; let sliderCoreText = html` ${mmbshpPara.core.toFixed(2)}`; let coreLabel = html`
core
`; sliderCore.value = (d3.max(data.map(d => d[attribute]).map(d => +d)) * 1.01 - (d3.min(data.map(d => d[attribute]).map(d => +d)) - Math.abs(d3.min(data.map(d => d[attribute]).map(d => +d)) * 0.01))) / (n * 2); sliderCore.max = mmbshpPara.support - mmbshpPara.intercom; let sliderSupport = html``; let sliderSupportText = html` ${mmbshpPara.support.toFixed(2)}`; let supportLable = html`
support
`; sliderSupport.value = ((mmbshpPara.max - mmbshpPara.min) / n - mmbshpPara.core) * 2 + mmbshpPara.core; sliderSupport.min = sliderCore.value; sliderSupport.max = ((mmbshpPara.max - mmbshpPara.min) / n - mmbshpPara.core) * 2 + mmbshpPara.core; // input html---------------------- let inputName = html`
`; // drag n ---------------------------------------- nValue.oninput = function() { // // generate log data; var send = new DataGene('n', this.value); if (logData.length == 0) { logData.push(send); } else if (send.eventType != logData[logData.length - 1].eventType) { logData.push(send); } else { logData[logData.length - 1] = send; } // // Calculate the parameters nValueText.innerHTML = this.value; mmbshpPara.n = Number(this.value); let n = Number(this.value); mmbshpPara.core = (d3.max(data.map(d => d[attribute]).map(d => +d)) * 1.01 - (d3.min(data.map(d => d[attribute]).map(d => +d)) - Math.abs(d3.min(data.map(d => d[attribute]).map(d => +d)) * 0.01))) / (n * 2); sliderCore.value = mmbshpPara.core; sliderCore.max = (mmbshpPara.max - mmbshpPara.min) / mmbshpPara.n; sliderCoreText.innerHTML = Number(mmbshpPara.core).toFixed(2); mmbshpPara.support = ((((mmbshpPara.max - mmbshpPara.min) / n - mmbshpPara.core) * 2 + mmbshpPara.core) * 2.5) / 3; sliderSupport.value = mmbshpPara.support; sliderSupport.min = sliderCore.value; sliderSupport.max = ((mmbshpPara.max - mmbshpPara.min) / n - mmbshpPara.core) * 2 + mmbshpPara.core; sliderSupportText.innerHTML = Number(mmbshpPara.support).toFixed(2); // // Calculate the dataCategory---------------------------------- var dataCategory = shpFunCreat(data, mmbshpPara); // // Change the name of overlapData------------------------------------- let nameData = d3 // get the data of name for overlapData ------------------------------------------ .select(this.parentNode.parentNode.parentNode) .select("#name-data") .node().__data__; dataCategory.overlapData.map(d => { let indexA = nameData.findIndex(e => e.id == d.id); indexA != -1 ? (d.name = nameData[indexA].name) : null; return d; }); // // Calculate the name data in dataCategory------------------------------- dataCategory.name.map(d => { let indexA = nameData.findIndex(e => e.id == d.id); indexA != -1 ? (d.name = nameData[indexA].name) : null; return; }); // // Reset the name data forking on specific element;----------------------------------------- if (nameData.length >= dataCategory.name.length) { d3 .select(this.parentNode.parentNode.parentNode) .select("#name-data") .node().__data__ = nameData; } else { d3 .select(this.parentNode.parentNode.parentNode) .select("#name-data") .node().__data__ = dataCategory.name; } // // Calculate the data package---------------------------------------- dataNewAttribute = addPara2Dataset(data, dataCategory, mmbshpPara); let divData = { dataCategory: dataCategory, parameter: mmbshpPara, logData: logData, dataNewAttribute: addPara2Dataset(data, dataCategory, mmbshpPara) }; // // Render the multiple cores and supports sliders------------------------ debugger; renderSlider({ data: divData, node: d3 .select(this.parentNode) .select("#core-support") .node(), rawData: data }); // // Render membership function ---------------------------------------- drawMembershipFunction(data, dataCategory, mmbshpPara, svg, logData); rendLambdaLine( divData.parameter, d3 .select(this.parentElement.parentElement) .select("#membershipFunction") .node() ); }; // Sliders lambda configuration------------------------------------------------- lambdaValue.oninput = function() { var send = new DataGene('lambda', this.value); if (logData.length == 0) { logData.push(send); } else if (send.eventType != logData[logData.length - 1].eventType) { logData.push(send); } else { logData[logData.length - 1] = send; } lambdaValueText.innerHTML = this.value; mmbshpPara.lambda = Number(this.value); // mutable mmbshpPara = mmbshpPara; var dataCategory = shpFunCreat(data, mmbshpPara); // mutable dataCategory = dataCategory; dataNewAttribute = addPara2Dataset( data, shpFunCreat(data, mmbshpPara), mmbshpPara ); // let divData = {}; let divData = { dataCategory: dataCategory, parameter: mmbshpPara, logData: logData, dataNewAttribute: addPara2Dataset(data, dataCategory, mmbshpPara) }; // debugger; rendLambdaLine( divData.parameter, d3 .select(this.parentElement.parentElement) .select("#membershipFunction") .node() ); this.parentElement.parentElement.parentElement.value = divData; this.parentElement.parentElement.parentElement.dispatchEvent( new CustomEvent("input") ); }; // drag core slider--------------------------------- sliderCore.oninput = function(d, e, f, g, k) { // debugger; var send = new DataGene('core', this.value); if (logData.length == 0) { logData.push(send); } else if (send.eventType != logData[logData.length - 1].eventType) { logData.push(send); } else { logData[logData.length - 1] = send; } sliderCoreText.innerHTML = Number(this.value); mmbshpPara.core = Number(this.value); sliderSupport.value = ((((mmbshpPara.max - mmbshpPara.min) / mmbshpPara.n - mmbshpPara.core) * 2 + mmbshpPara.core) * 2.5) / 3; sliderSupport.min = sliderCore.value; sliderSupport.max = ((mmbshpPara.max - mmbshpPara.min) / mmbshpPara.n - mmbshpPara.core) * 2 + mmbshpPara.core; sliderSupportText.innerHTML = Number(sliderSupport.value); mmbshpPara.support = sliderSupport.value; // // Calculate dataCategory------------ var dataCategory = shpFunCreat(data, mmbshpPara); // // Change the name of overlapData--------------------------------------------- debugger; let nameData = d3 // get the data of name for overlapData ------------------------------------------ .select(this.parentNode.parentNode.parentNode) .select("#name-data") .node().__data__; dataCategory.overlapData.map(d => { let indexA = nameData.findIndex(e => e.id == d.id); d.name = nameData[indexA].name; return d; }); // // Reset the name data forking on specific element;----------------------------------------- dataCategory.name.map(d => { let indexA = nameData.findIndex(e => e.id == d.id); indexA != -1 ? (d.name = nameData[indexA].name) : null; return; }); d3 .select(this.parentNode.parentNode.parentNode) .select("#name-data") .node().__data__ = dataCategory.name; // // ---------------------------------------------------------------- dataNewAttribute = addPara2Dataset( data, shpFunCreat(data, mmbshpPara), mmbshpPara ); let divData = { dataCategory: dataCategory, parameter: mmbshpPara, logData: logData, dataNewAttribute: addPara2Dataset(data, dataCategory, mmbshpPara) }; debugger; drawMembershipFunction(data, dataCategory, mmbshpPara, svg, logData); // debugger; // renderName( // d3.select(this.parentNode.parentNode.parentNode), // dataCategory.name // ); rendLambdaLine( divData.parameter, d3 .select(this.parentElement.parentElement) .select("#membershipFunction") .node() ); }; // // drag support slider------------------------------------------- sliderSupport.oninput = function() { // // -----------Log data---------------------------------- var send = new DataGene('support', this.value); if (logData.length == 0) { logData.push(send); } else if (send.eventType != logData[logData.length - 1].eventType) { logData.push(send); } else { logData[logData.length - 1] = send; } // // Calculate the value of sliders--------------------------- mmbshpPara.support = Number(this.value); mmbshpPara.intercom = (mmbshpPara.max - mmbshpPara.min) / mmbshpPara.n - mmbshpPara.core; sliderSupportText.innerHTML = this.value; // // calculate dataCategory----------------------------------- var dataCategory = shpFunCreat(data, mmbshpPara); // // Change the name of overlapData and name data------------------------------ debugger; let nameData = d3 // get the data of name for overlapData ------------------------------------------ .select(this.parentNode.parentNode.parentNode) .select("#name-data") .node().__data__; dataCategory.overlapData.map(d => { let indexA = nameData.findIndex(e => e.id == d.id); d.name = nameData[indexA].name; return d; }); // // Reset the name data forking on specific element;----------------------------------------- dataCategory.name.map(d => { let indexA = nameData.findIndex(e => e.id == d.id); indexA != -1 ? (d.name = nameData[indexA].name) : null; return; }); d3 .select(this.parentNode.parentNode.parentNode) .select("#name-data") .node().__data__ = dataCategory.name; // Draw membership function---------------------------------- drawMembershipFunction(data, dataCategory, mmbshpPara, svg, logData); dataCategory.overlapData = dataCategory.overlapData.filter( d => d.edgeMax - d.edgeMin > 0.005 * (Number(d.edgeMax) + Number(d.edgeMin)) ); dataNewAttribute = addPara2Dataset( data, shpFunCreat(data, mmbshpPara), mmbshpPara ); let divData = { dataCategory: dataCategory, parameter: mmbshpPara, logData: logData, dataNewAttribute: addPara2Dataset(data, dataCategory, mmbshpPara) }; debugger; drawMembershipFunction(data, dataCategory, mmbshpPara, svg, logData); rendLambdaLine( divData.parameter, d3 .select(this.parentElement.parentElement) .select("#membershipFunction") .node() ); }; // svg (it's the membership function section) configuration------------------------------------------- let svg = d3 .create("svg") .attr("width", widthLegend) .attr("height", heightLegend) .attr("id", "legend-view"); // // calculate the dataCategory, dataNewAttribute and parameters by using shpFunCreate--------------------------------- dataCategory = shpFunCreat(data, mmbshpPara); dataNewAttribute = addPara2Dataset(data, dataCategory, mmbshpPara); let divData = { dataCategory: dataCategory, parameter: mmbshpPara, logData: logData, dataNewAttribute: dataNewAttribute }; // // Add a configuration html for multiple sliders of core and supports---------------------------------- let multipleSliders = html`

`; let ui = html`

${nValue} ${nValueText} ${nValueLabel} ${multipleSliders} ${"" /*sliderCore*/} ${"" /*sliderCoreText*/} ${"" /*coreLabel*/} ${"" /*sliderSupport*/} ${"" /*sliderSupportText*/} ${"" /*supportLable*/} ${"" /*lambdaValue*/} ${"" /*lambdaValueText*/} ${"" /*lambdaValueLabel*/}

${svg.node()}

Input name of categories ${inputName} `; debugger; renderSlider({ node: multipleSliders, data: divData, rawData: data }); drawMembershipFunction(data, dataCategory, mmbshpPara, svg, logData); renderName(svg.node().parentNode.parentNode.parentNode, dataCategory.name); // Create the element saving name data--- return ui; }34:T1db8,function renderSlider(options) { let node = options.node; // let id = options.id; let data = options.data; let x = options.x; let y = options.y; let rawData = options.rawData; // // delete exited elements in sliders container----------------------------- d3.select(node) .select("#core") .selectAll("*") .remove(); d3.select(node) .select("#support") .selectAll("*") .remove(); for (var i = 0; i < data.parameter.n; i++) { // // Calculate the value of slider--------------------------------- let coreValue = data.dataCategory.coreData[i].edgeMax - data.dataCategory.coreData[i].edgeMin; let supportValue = data.dataCategory.supportData[i].edgeMax - data.dataCategory.supportData[i].edgeMin; // // Calculate the maximum and minimum value of cores and supports----------------------- let coreMax, coreMin = 0, supportMax, supportMin = coreValue; if (i == 0) { coreMax = Math.min( data.dataCategory.supportData[i + 1].edgeMin, data.dataCategory.supportData[i].edgeMax ) - data.parameter.min; supportMax = data.dataCategory.coreData[i + 1].edgeMin - data.parameter.min; } else if (i == data.parameter.n - 1) { coreMax = data.parameter.max - data.dataCategory.supportData[i - 1].edgeMax; supportMax = data.parameter.max - data.dataCategory.coreData[i - 1].edgeMax; } else { coreMax = data.dataCategory.supportData[i + 1].edgeMin - data.dataCategory.supportData[i - 1].edgeMax; supportMax = data.dataCategory.coreData[i + 1].edgeMin - data.dataCategory.coreData[i - 1].edgeMax; } // // render elements in #core-------------------------------------- // debugger; d3 .select(node) .select("#core") .data([i]) .append("input") .attr("type", "range") .attr("id", "core_" + i) .attr("min", 0) .attr("max", coreMax) .attr("step", coreMax / 10000) .style("width", "70%") .attr("value", coreValue) .node().oninput = d => { // debugger; x, y, rawData; let index = Number( d.target.id.split("")[d.target.id.split("").length - 1] ); let svg = d3.select(node); let id = "core_" + index; let dataHere = data; // // Update those datasets------------------------------- let dataPackage = updateDataMultiCores({ data: data, node: node, index: index, rawData: rawData }); // // Add log data-------------- var send = new DataGene( 'core_' + index, d3 .select(node) .select("#core_" + index) .node().value ); if (dataPackage.logData.length == 0) { dataPackage.logData.push(send); } else if ( send.eventType != dataPackage.logData[dataPackage.logData.length - 1].eventType ) { dataPackage.logData.push(send); } else { dataPackage.logData[dataPackage.logData.length - 1] = send; } // // Render the representation of values of sliders------------ d3.select(node) .select("#core") .select("#core-text-" + index) .text( Number( d3 .select(node) .select("#core") .select("#" + id) .node().value ).toFixed(2) ); clMinMax({ node: node, i: index, data: dataPackage }); if (index == 0) { clMinMax({ node: node, i: index + 1, data: dataPackage }); } else if (index == dataPackage.parameter.n - 1) { clMinMax({ node: node, i: index - 1, data: dataPackage }); } else { clMinMax({ node: node, i: index - 1, data: dataPackage }); clMinMax({ node: node, i: index + 1, data: dataPackage }); } // // Render all kinds of lines, points..----------------------- drawMembershipFunction( rawData, dataPackage.dataCategory, dataPackage.parameter, d3.select(node.parentElement.parentElement).select("#legend-view"), dataPackage.logData ); }; d3.select(node) .select("#core") .append("text") .text(coreValue.toFixed(2)) .attr("class", "core-text") .attr("id", "core-text-" + i) .style("font-size", "0.8em") .attr("dominant-baseline", "middle"); d3.select(node) .select("#core") .append("div") .text("core_" + i) .style("font-size", "0.8em"); // // render elements in #support-------------------------- d3 .select(node) .select("#support") .append("input") .attr("type", "range") .attr("id", "support_" + i) .attr("min", supportMin) .attr("max", supportMax) .attr("step", (supportMax - supportMin) / 10000) .style("width", "70%") .attr("value", supportValue) .node().oninput = d => { x, y, rawData; // debugger; let index = Number( d.target.id.split("")[d.target.id.split("").length - 1] ); let svg = d3.select(node); let id = "support_" + index; let dataHere = data; // // Render the reprensatation of values of sliders--------------- d3.select(node) .select("#support") .select("#support-text-" + index) .text( Number( d3 .select(node) .select("#support") .select("#" + id) .node().value ).toFixed(2) ); // // Update the maximum value of slider cores--------------------- d3.select(node) .select("#core") .select("#core_" + index) .attr( "max", Number( d3 .select(node) .select("#support") .select("#" + id) .node().value ) ); // // Update those datasets------------------------------- let dataPackage = updateDataMultiSupports({ data: data, node: node, index: index, rawData: rawData }); // // Add log data-------------- var send = new DataGene( 'support_' + index, d3 .select(node) .select("#support_" + index) .node().value ); if (dataPackage.logData.length == 0) { dataPackage.logData.push(send); } else if ( send.eventType != dataPackage.logData[dataPackage.logData.length - 1].eventType ) { dataPackage.logData.push(send); } else { dataPackage.logData[dataPackage.logData.length - 1] = send; } // // Render all kinds of lines, points..----------------------- // debugger; drawMembershipFunction( rawData, dataPackage.dataCategory, dataPackage.parameter, d3.select(node.parentElement.parentElement).select("#legend-view"), dataPackage.logData ); }; d3.select(node) .select("#support") .append("text") .attr("class", "support-text") .attr("id", "support-text-" + i) .text(supportValue.toFixed(2)) .style("font-size", "0.8em") .attr("dominant-baseline", "middle"); d3.select(node) .select("#support") .append("div") .text("support_" + i) .style("font-size", "0.8em"); } }35:Te8d,function updateDataMultiSupports(options) { var data = options.data; let node = options.node; let index = options.index; let rawData = options.rawData; // debugger; // // update all datasets with different situations, index = 0, etc.-------------- if (index == 0) { // update the coreData---------------------- data.dataCategory.supportData[index].edgeMax = Number( d3 .select(node) .select("#support_" + index) .node().value ) + data.parameter.min; // update the lineData------------------------ data.dataCategory.lineData[index][2][0] = Number( d3 .select(node) .select("#support_" + index) .node().value ) + data.parameter.min; } else if (index == data.parameter.n - 1) { // update the coreData---------------------- data.dataCategory.supportData[index].edgeMin = data.parameter.max - Number( d3 .select(node) .select("#support_" + index) .node().value ); // update the lineData------------------------ data.dataCategory.lineData[index][0][0] = data.parameter.max - Number( d3 .select(node) .select("#support_" + index) .node().value ); } else { // debugger; let meanpoint = (Number(data.dataCategory.coreData[index].edgeMax) + Number(data.dataCategory.coreData[index].edgeMin)) / 2; let firstWidth = Math.min( (data.dataCategory.coreData[index + 1].edgeMin - meanpoint) * 2, (meanpoint - data.dataCategory.coreData[index - 1].edgeMax) * 2 ); let supportValue = d3 .select(node) .select("#support_" + index) .node().value; if (supportValue < firstWidth) { data.dataCategory.supportData[index].edgeMin = meanpoint - supportValue / 2; data.dataCategory.supportData[index].edgeMax = meanpoint + supportValue / 2; } else if (supportValue >= firstWidth) { debugger; if ( data.dataCategory.coreData[index + 1].edgeMin - meanpoint - meanpoint + +data.dataCategory.coreData[index - 1].edgeMax < 0 ) { // if right side support are touched first------------ debugger; data.dataCategory.supportData[index].edgeMax = +data.dataCategory .coreData[index + 1].edgeMin; data.dataCategory.supportData[index].edgeMin = data.dataCategory.coreData[index + 1].edgeMin - supportValue; } else { debugger; // if the left sidesupport are touched first--------------- data.dataCategory.supportData[index].edgeMin = +data.dataCategory .coreData[index - 1].edgeMax; data.dataCategory.supportData[index].edgeMax = +data.dataCategory.coreData[index - 1].edgeMax + +supportValue; } } // update the lineData --------------------------- data.dataCategory.lineData[index][0][0] = +data.dataCategory.supportData[ index ].edgeMin; data.dataCategory.lineData[index][3][0] = +data.dataCategory.supportData[ index ].edgeMax; } let inputTextRect = d3 .select(node.parentElement.parentElement) .select("#svg-edit") .node() .getElementsByClassName("edit-text"); data.dataCategory.overlapData = calOverlapData( data.dataCategory.coreData, data.dataCategory.supportData, data.dataCategory.overlapData, inputTextRect ); let dataNewAttribute = addPara2Dataset( rawData, data.dataCategory, data.parameter ); data.dataNewAttribute = dataNewAttribute; // d3.select(node) return data; }36:T136b,function updtSldsAftDrg(options) { let index = options.index; //the index of sliders let data = options.data; let node = d3 .select(options.node.parentElement.parentElement.parentElement) .select("#core-support") .node(); // #core-support node debugger; // // Judge which core and support will be changed------------------------- let indexCandS, changeIndex; index % 2 == 0 ? (indexCandS = index / 2) : (indexCandS = (index + 1) / 2); index % 2 == 0 ? (changeIndex = indexCandS + 1) : (changeIndex = indexCandS - 1); // // Calculate the maximum and minimum values of cores and support sliders and render them--------------------------------- // function clMinMax(i) { // let coreValue = // data.dataCategory.coreData[i].edgeMax - // data.dataCategory.coreData[i].edgeMin; // let supportValue = // data.dataCategory.supportData[i].edgeMax - // data.dataCategory.supportData[i].edgeMin; // // // // Calculate the maximum and minimum value of cores and supports----------------------- // let coreMax, // coreMin = 0, // supportMax, // supportMin = coreValue; // if (i == 0) { // coreMax = // Math.min( // data.dataCategory.supportData[i].edgeMax, // data.dataCategory.supportData[i + 1].edgeMin // ) - data.parameter.min; // supportMax = // data.dataCategory.coreData[i + 1].edgeMin - data.parameter.min; // } else if (i == data.parameter.n - 1) { // coreMax = // data.parameter.max - // Math.max( // data.dataCategory.supportData[i].edgeMin, // data.dataCategory.supportData[i - 1].edgeMax // ); // supportMax = // data.parameter.max - data.dataCategory.coreData[i - 1].edgeMax; // } else { // let meanPoint = // (data.dataCategory.coreData[i].edgeMax + // data.dataCategory.coreData[i].edgeMin) / // 2; // // calculate the four distance from meanpoint // let widthCore1 = meanPoint - data.dataCategory.coreData[i - 1].edgeMax; // let widthCore2 = meanPoint - data.dataCategory.coreData[i].edgeMin; // let widthSupport2 = meanPoint - data.dataCategory.supportData[i].edgeMin; // let widthSupport1 = // meanPoint - data.dataCategory.supportData[i - 1].edgeMax; // let widthSupport3 = data.dataCategory.supportData[i].edgeMax - meanPoint; // let widthSupport4 = // data.dataCategory.supportData[i + 1].edgeMin - meanPoint; // let widthCore3 = data.dataCategory.coreData[i].edgeMax - meanPoint; // let widthCore4 = data.dataCategory.coreData[i + 1].edgeMin - meanPoint; // coreMax = // Math.min(widthSupport1, widthSupport2, widthSupport3, widthSupport4) * // 2; // supportMax = Math.min(widthCore1, widthCore4) * 2; // } // // // // Calculate coreWidth for each main category-------------- // let coreWidth = ( // data.dataCategory.coreData[i].edgeMax - // data.dataCategory.coreData[i].edgeMin // ).toFixed(2); // // // // Calculate the support for each main category----------------- // let supportWidth = ( // data.dataCategory.supportData[i].edgeMax - // data.dataCategory.supportData[i].edgeMin // ).toFixed(2); // debugger; // // // // Add max attributes for cores and support sliders----------------- // d3.select(node) // .select("#core_" + i) // .attr("max", coreMax) // .attr("step", coreMax / 100) // .attr("value", coreValue); // d3.select(node) // .select("#core-text-" + i) // .text(coreWidth); // d3.select(node) // .select("#support_" + i) // .attr("max", supportMax) // .attr("min", supportMin) // .attr("step", (supportMax - supportMin) / 100) // .attr("value", supportValue); // d3.select(node) // .select("#support-text-" + i) // .text(supportWidth); // } if (indexCandS == 0) { clMinMax({ i: indexCandS, node: node, data: data }); clMinMax({ i: indexCandS + 1, node: node, data: data }); // clMinMax(indexCandS); // clMinMax(indexCandS + 1); } else if (data.parameter.n - 1 == indexCandS) { clMinMax({ i: indexCandS, node: node, data: data }); clMinMax({ i: indexCandS - 1, node: node, data: data }); // clMinMax(indexCandS); // clMinMax(indexCandS - 1); } else { clMinMax({ i: indexCandS, node: node, data: data }); clMinMax({ i: indexCandS + 1, node: node, data: data }); clMinMax({ i: indexCandS - 1, node: node, data: data }); // clMinMax(indexCandS); // clMinMax(indexCandS + 1); // clMinMax(indexCandS - 1); } // clMinMax(changeIndex); debugger; }37:Ta0f,function clMinMax(options) { let i = options.i; let data = options.data; let node = options.node; let coreValue = data.dataCategory.coreData[i].edgeMax - data.dataCategory.coreData[i].edgeMin; let supportValue = data.dataCategory.supportData[i].edgeMax - data.dataCategory.supportData[i].edgeMin; // // Calculate the maximum and minimum value of cores and supports----------------------- let coreMax, coreMin = 0, supportMax, supportMin = coreValue; if (i == 0) { coreMax = Math.min( data.dataCategory.supportData[i + 1].edgeMin, data.dataCategory.supportData[i].edgeMax ) - data.parameter.min; supportMax = data.dataCategory.coreData[i + 1].edgeMin - data.parameter.min; // coreMax = // Math.min( // data.dataCategory.supportData[i].edgeMax, // data.dataCategory.supportData[i + 1].edgeMin // ) - data.parameter.min; // supportMax = data.dataCategory.coreData[i + 1].edgeMin - data.parameter.min; } else if (i == data.parameter.n - 1) { coreMax = data.parameter.max - Math.max( data.dataCategory.supportData[i - 1].edgeMax, data.dataCategory.supportData[i].edgeMin ); supportMax = data.parameter.max - data.dataCategory.coreData[i - 1].edgeMax; // coreMax = // data.parameter.max - // Math.max( // data.dataCategory.supportData[i].edgeMin, // data.dataCategory.supportData[i - 1].edgeMax // ); // supportMax = data.parameter.max - data.dataCategory.coreData[i - 1].edgeMax; } else { coreMax = Math.min( data.dataCategory.supportData[i + 1].edgeMin, data.dataCategory.supportData[i].edgeMax ) - Math.max( data.dataCategory.supportData[i - 1].edgeMax, data.dataCategory.supportData[i].edgeMin ); debugger; supportMax = data.dataCategory.coreData[i + 1].edgeMin - data.dataCategory.coreData[i - 1].edgeMax; } // // Add max attributes for cores and support sliders----------------- d3.select(node) .select("#core_" + i) .attr("max", coreMax) .attr("step", coreMax / 1000) .attr("value", coreValue); d3.select(node) .select("#core-text-" + i) .text(coreValue.toFixed(2)); d3.select(node) .select("#support_" + i) .attr("max", supportMax) .attr("min", supportMin) .attr("step", (supportMax - supportMin) / 1000) .attr("value", supportValue); d3.select(node) .select("#support-text-" + i) .text(supportValue.toFixed(2)); }38:T1b63,function updateDataMultiCores(options) { var data = options.data; let node = options.node; let index = options.index; let rawData = options.rawData; // // update all datasets with different situations, index = 0, etc.-------------- if (index == 0) { // update the coreData---------------------- data.dataCategory.coreData[index].edgeMax = Number( d3 .select(node) .select("#core_" + index) .node().value ) + data.parameter.min; // update the lineData------------------------ data.dataCategory.lineData[index][1][0] = Number( d3 .select(node) .select("#core_" + index) .node().value ) + data.parameter.min; // update the dotData------------------------- data.dataCategory.dotData[index][0][0] = Number( d3 .select(node) .select("#core_" + index) .node().value ) + data.parameter.min; data.dataCategory.dotData[index][1][0] = Number( d3 .select(node) .select("#core_" + index) .node().value ) + data.parameter.min; // update the movepoint----------------------- data.dataCategory.movepoint[index][0] = Number( d3 .select(node) .select("#core_" + index) .node().value ) + data.parameter.min; } else if (index == data.parameter.n - 1) { // update the coreData---------------------- debugger; data.dataCategory.coreData[index].edgeMin = data.parameter.max - Number( d3 .select(node) .select("#core_" + index) .node().value ); // update the lineData------------------------ data.dataCategory.lineData[index][1][0] = data.parameter.max - Number( d3 .select(node) .select("#core_" + index) .node().value ); // update the dotData------------------------- data.dataCategory.dotData[2 * index - 1][0][0] = data.parameter.max - Number( d3 .select(node) .select("#core_" + index) .node().value ); data.dataCategory.dotData[2 * index - 1][1][0] = data.parameter.max - Number( d3 .select(node) .select("#core_" + index) .node().value ); // update the movepoint----------------------- data.dataCategory.movepoint[2 * index - 1][0] = data.parameter.max - Number( d3 .select(node) .select("#core_" + index) .node().value ); } else { // // When the main category is not the first one or last one------------------------------------ let meanpoint = (Number(data.dataCategory.coreData[index].edgeMax) + Number(data.dataCategory.coreData[index].edgeMin)) / 2; if ( data.dataCategory.coreData[index].edgeMax < Math.min( data.dataCategory.supportData[index].edgeMax, data.dataCategory.supportData[index + 1].edgeMin ) && data.dataCategory.coreData[index].edgeMin > Math.max( data.dataCategory.supportData[index - 1].edgeMax, data.dataCategory.supportData[index].edgeMin ) ) { // debugger; // // The situatin: core's two sides do not touch any support of two sides--------------- // update the coreData-------------------------- data.dataCategory.coreData[index].edgeMin = meanpoint - Number( d3 .select(node) .select("#core_" + index) .node().value ) / 2; data.dataCategory.coreData[index].edgeMax = Math.min( Math.min( data.dataCategory.supportData[index].edgeMax, data.dataCategory.supportData[index + 1].edgeMin ), meanpoint + Number( d3 .select(node) .select("#core_" + index) .node().value ) / 2 ); } else if ( data.dataCategory.coreData[index].edgeMin > Math.max( data.dataCategory.supportData[index - 1].edgeMax, data.dataCategory.supportData[index].edgeMin ) && data.dataCategory.coreData[index].edgeMax >= Math.min( data.dataCategory.supportData[index].edgeMax, data.dataCategory.supportData[index].edgeMin ) ) { // // Right core reach the peak point----------------------------------- // update the core data--------------- data.dataCategory.coreData[index].edgeMin = data.dataCategory.coreData[index].edgeMax - d3 .select(node) .select("#core_" + index) .node().value; data.dataCategory.coreData[index].edgeMax = Math.min( data.dataCategory.supportData[index].edgeMax, data.dataCategory.supportData[index + 1].edgeMin ); } else { data.dataCategory.coreData[index].edgeMax = +data.dataCategory.coreData[index].edgeMin + +d3 .select(node) .select("#core_" + index) .node().value; data.dataCategory.coreData[index].edgeMin = Math.max( data.dataCategory.supportData[index - 1].edgeMax, data.dataCategory.supportData[index].edgeMin ); } // update the lineData--------------------- data.dataCategory.lineData[index][1][0] = data.dataCategory.coreData[index].edgeMin; data.dataCategory.lineData[index][2][0] = data.dataCategory.coreData[index].edgeMax; // update dotData------------------------ data.dataCategory.dotData[2 * index - 1][0][0] = data.dataCategory.coreData[index].edgeMin; data.dataCategory.dotData[2 * index - 1][1][0] = data.dataCategory.coreData[index].edgeMin; data.dataCategory.dotData[2 * index][0][0] = data.dataCategory.coreData[index].edgeMax; data.dataCategory.dotData[2 * index][1][0] = data.dataCategory.coreData[index].edgeMax; // update movepoint--------------------------------------- data.dataCategory.movepoint[2 * index - 1][0] = data.dataCategory.coreData[index].edgeMin; data.dataCategory.movepoint[2 * index][0] = data.dataCategory.coreData[index].edgeMax; } // // Calculate the overlapData----------------------- // debugger; let inputTextRect = d3 .select(node.parentElement.parentElement) .select("#svg-edit") .node() .getElementsByClassName("edit-text"); data.dataCategory.overlapData = calOverlapData( data.dataCategory.coreData, data.dataCategory.supportData, data.dataCategory.overlapData, inputTextRect ); let dataNewAttribute = addPara2Dataset( rawData, data.dataCategory, data.parameter ); data.dataNewAttribute = dataNewAttribute; // d3.select(node) return data; }39:T5bd,function mapRandom(data) { var height = width * 0.4; let svg = d3 .create("svg") .attr("width", width) .attr("height", height); var margin = { top: 30, right: 30, bottom: 30, left: 30 }; // var width = document.getElementById('map').clientWidth; if (width > height) { var xScale = d3 .scaleLinear() .range([margin.left, height - margin.right]) .domain([0, 1000]); var yScale = d3 .scaleLinear() .range([height - margin.right, margin.left]) .domain([0, 1000]); } else { var xScale = d3 .scaleLinear() .range([margin.left, width - margin.right]) .domain([0, 1000]); var yScale = d3 .scaleLinear() .range([width - margin.right, margin.left]) .domain([0, 1000]); } var pointData = []; var lineColor = []; for (var i = 0; i < data.length; i++) { var a = [ { lon: data[i].x1, lat: data[i].y1 }, { lon: data[i].x2, lat: data[i].y2 } ]; a.color = data[i].color; lineColor.push(data[i].color); pointData.push(a); } debugger; var line = d3 .line() .x(d => xScale(d.lon)) .y(d => yScale(d.lat)); // .interpolate("basis") // var svg = d3.select("#map"); svg .selectAll("path") .data(pointData) .enter() .append("path") .attr("d", line) // .attr("fill", "black") .attr("stroke-width", 3) .attr("stroke", d => d.color); // .attr("opacity", 0.3); return svg.node(); }3a:T150b,function addPara2Dataset(data, dataCategory, mmbshpPara) { // data is the raw dataset // dataCategory is the data generated from shpFunCreat, which include overlapData, coreData, etc. // mmbshpPara is the parameters // debugger; // dataCategory.overlapData = dataCategory.overlapData.filter( // d => d != undefined // ); // // Add Fuzzy Categories; // data.map(d => { var categoryClass = []; for (var i = 0; i < dataCategory.overlapData.length; i++) { if ( Number(d[mmbshpPara.attributeCut]) >= Number(dataCategory.overlapData[i].edgeMin) && Number(d[mmbshpPara.attributeCut]) <= Number(dataCategory.overlapData[i].edgeMax) ) { categoryClass.push(dataCategory.overlapData[i].name); } d['Fuzzy Categories'] = categoryClass; } }); // // Add membership degree; // data.map(d => { let value = d[mmbshpPara.attributeCut]; let mdArr = []; for (var i = 0; i < dataCategory.lineData.length; i++) { // debugger; let index = dataCategory.lineData[i].findIndex((e, c, f) => { return e[0] > value; }); if (index == -1) { mdArr.push(0); } else if (index == 0) { // debugger; mdArr.push(0); } else if ( dataCategory.lineData[i][index][1] == 1 && dataCategory.lineData[i][index - 1][1] == 1 ) { // debugger; mdArr.push(1); } else if ( dataCategory.lineData[i][index - 1][1] == 0 && dataCategory.lineData[i][index][1] == 1 ) { let mdValue = (value - dataCategory.lineData[i][index - 1][0]) / (dataCategory.lineData[i][index][0] - dataCategory.lineData[i][index - 1][0]); mdArr.push(mdValue); } else if ( dataCategory.lineData[i][index - 1][1] == 1 && dataCategory.lineData[i][index][1] == 0 ) { let mdValue = (dataCategory.lineData[i][index][0] - value) / (dataCategory.lineData[i][index][0] - dataCategory.lineData[i][index - 1][0]); mdArr.push(mdValue); } // mdArr.push(); } mdArr = mdArr.map(d => Number(d.toFixed(2))); d["Membership Degree"] = mdArr; return d; }); // // Add color to raw dataset; let gradientColor = (d, index) => { // debugger; let color1 = d3.hsl(d.color[index]); let a = d3.hsl(d.color[index]); a.s = 0; let color2 = a; return d3.interpolateHsl(color2, color1); }; // let newLineData = new Array(mmbshpPara.n); for (var i = 0; i < dataCategory.lineData.length; i++) { // add multiple arrays for rendering lines; let seg = d3.range(0, 1, 0.1); seg.push(1); let yValue = []; for (var j = 0; j < dataCategory.lineData[i].length - 1; j++) { for (var m = 0; m < seg.length; m++) { // if (m == 8) debugger; yValue.push( d3.interpolate( dataCategory.lineData[i][j], dataCategory.lineData[i][j + 1] )(seg[m]) ); } yValue.map(d => d[0].toFixed(3)); yValue.id = i; } newLineData[i] = yValue; } newLineData.map(d => d.map(d => { d[0] = d[0].toFixed(2); return d; }) ); // debugger; var newData = newLineData.map((d, Index) => { d = d.map((p, index) => { let a; if (index === d.length - 1) { a = [p]; // return a; } else { a = [p, d[index + 1]]; // return a; } // debugger; a.id = Index; // debugger; var new_col = gradientColor(mmbshpPara, Index)(p[1]).replace( /rgb/i, "rgba" ); var new_col = new_col.replace(/\)/i, ',0.5)'); a.color = new_col; return a; }); return d; }); // debugger; data.map(d => { // if (d.name == "Smithers") debugger; let attr = d[mmbshpPara.attributeCut]; let coArr = new Array(mmbshpPara.n); for (var i = 0; i < newData.length; i++) { newData[i].map((p, inx) => { if (p.length != 1) { if (+attr >= +p[0][0] && +attr < +p[1][0]) { // if (d.name == "Mr. Burns") debugger; coArr.push(p.color); } } else if ( p.length == 1 && +attr <= +p[0][0] && +attr >= +newData[i][inx - 1][1][0] ) { // debugger; coArr.push(p.color); } // return p; }); } debugger; let colorArr = coArr.filter(d => d != undefined); // debugger; if (colorArr == undefined) debugger; let colorArrFinal; if (colorArr.length == 1) { colorArrFinal = colorArr[0]; } else if (colorArr.length == 2) { // debugger; colorArrFinal = colorArr.reduce((a, b) => { let c = d3.rgb(); c.r = (d3.rgb(a).r + d3.rgb(b).r) / 2; c.g = (d3.rgb(a).g + d3.rgb(b).g) / 2; c.b = (d3.rgb(a).b + d3.rgb(b).b) / 2; var new_col = c.toString().replace(/rgb/i, "rgba"); var new_col = new_col.replace(/\)/i, ',0.5)'); // debugger; return new_col; }); } // coArr.filter(d => d!= undefined).length == 1? d["color"] = coArr.filter(d => d!= undefined): d["color"] = coArr.filter(d => d!= undefined) d["color"] = colorArrFinal; return d; }); // debugger; return data; }3b:T480,function rendLambdaLine(data, node, x, y) { d3.select(node) .select("#lambda-line") .remove(); var attributeCut = data.attributeCut; var height = data.heightLegend; var width = data.widthLegend; var max = data.max; var min = data.min; var n = data.n; var lambda = data.lambda; // var x = d3 // .scaleLinear() // .domain([min, max]) // .range([margin.left, width - margin.right]); // var y = d3 // .scaleLinear() // .domain([0, 1.1]) // .range([height * 0.8 - margin.bottom, margin.top]); // var line = d3 // .line() //generator of path // .x(d => x(d[0])) // .y(d => y(d[1])); // if (lambda != 0 && lambda != 1) { // d3.select(node) // .append("path") // .datum([[min, lambda], [max, lambda]]) // .attr("fill", "none") // .attr("stroke", "black") // .attr("stroke-width", 1.5) // .attr("stroke-linejoin", "round") // .attr("stroke-dasharray", "3,3") // .attr("stroke-linecap", "round") // .attr("id", "lambda-line") // .attr("d", line); // } // return node; }3c:T1568,function drawSlider(mmbshpParaTrue, svg, data, logData) { var attributeCut = mmbshpParaTrue.attributeCut; var height = mmbshpParaTrue.heightLegend; var width = mmbshpParaTrue.widthLegend; var max = mmbshpParaTrue.max; var min = mmbshpParaTrue.min; var n = mmbshpParaTrue.n; var x = d3 .scaleLinear() .domain([min, max]) .range([margin.left, width - margin.right]); var y = d3 .scaleLinear() .domain([0, 2.2]) .range([height - margin.bottom, margin.top]); // Draw sliders include slider1 and slider2-------------------------------------------------- var slider1 = svg .append("svg") .attr("width", width * 0.4) .attr("height", height * 0.2) .attr("x", x(min) + margin.left) .attr("y", y(2.2)) .attr("id", "slider-core"); svgSlider(slider1) .max((max - min) / n) .min(0) .value(mmbshpParaTrue.core)(); var minSupport = Number( svg .select("#slider-core") .select("text") .text() ); var slider2 = svg .append("svg") .attr("width", width * 0.4) .attr("height", height * 0.2) .attr("x", x(min) * 0.5 + x(max) * 0.5) .attr("y", y(2.2)) .attr("id", "slider-support"); svgSlider(slider2) .max(((max - min) / n - minSupport) * 2 + minSupport) .min(minSupport) .value(((max - min) / n - mmbshpParaTrue.core) * 2 + mmbshpParaTrue.core)(); // ---------------------------------------------------------------listen drag event, parameter core slider debugger; svg .select("#slider-core") .select("text") .on("DOMNodeInserted", d => { debugger; minSupport = Number( svg .select("#slider-core") .select("text") .text() ); mmbshpParaTrue.core = minSupport; mmbshpParaTrue.support = ((max - min) / n - mmbshpParaTrue.core) * 2 + mmbshpParaTrue.core; svg .select("#slider-support") .selectAll("*") .remove(); // svg // .select("#slider-support") // .select("text") // .text(mmbshpParaTrue.support.toFixed(2)); // mutable mmbshpPara = mmbshpParaTrue; // mutable dataCategory = shpFunCreat(data, mmbshpParaTrue); // mutable dataNewAttribute = addPara2Dataset( // data, // shpFunCreat(data, mmbshpParaTrue), // mmbshpParaTrue // ); var send = new DataGene('core', mmbshpParaTrue.core); if (logData.length == 0) { logData.push(send); } else if (send.eventType != logData[logData.length - 1].eventType) { logData.push(send); } else { logData[logData.length - 1] = send; } svg.select("#membershipFunction").remove(); // drawMembershipFunction( // data, // mutable dataCategory, // mutable mmbshpPara, // svg // ); svgSlider(slider2) .max(((max - min) / n - minSupport) * 2 + minSupport) .min(minSupport) .value( ((max - min) / n - mmbshpParaTrue.core) * 2 + mmbshpParaTrue.core )(); svg .select("#slider-support") .select("text") .on("DOMNodeInserted", d => { debugger; mmbshpParaTrue.support = Number( Number( d3 .select("#slider-support") .select("text") .text() ).toFixed(2) ); // mutable mmbshpPara = mmbshpParaTrue; // mutable dataCategory = shpFunCreat(data, mmbshpParaTrue); // mutable dataNewAttribute = addPara2Dataset( // data, // shpFunCreat(data, mmbshpParaTrue), // mmbshpParaTrue // ); var send = new DataGene('support', mmbshpParaTrue.support); if (logData.length == 0) { logData.push(send); } else if (send.eventType != logData[logData.length - 1].eventType) { logData.push(send); } else { logData[logData.length - 1] = send; } svg.select("#membershipFunction").remove(); drawMembershipFunction( data, shpFunCreat(data, mmbshpParaTrue), mmbshpParaTrue, svg ); return d; }); return d; }); // ---------------------------------------------------------------listen drag event, parameter support svg .select("#slider-support") .select("text") .on("DOMNodeInserted", d => { debugger; mmbshpParaTrue.support = Number( Number( d3 .select("#slider-support") .select("text") .text() ).toFixed(2) ); // mutable mmbshpPara = mmbshpParaTrue; // mutable dataCategory = shpFunCreat(data, mmbshpParaTrue); // mutable dataNewAttribute = addPara2Dataset( // data, // shpFunCreat(data, mmbshpParaTrue), // mmbshpParaTrue // ); svg.select("#membershipFunction").remove(); drawMembershipFunction( data, shpFunCreat(data, mmbshpParaTrue), mmbshpParaTrue, svg ); var send = new DataGene('support', mmbshpParaTrue.support); if (logData.length == 0) { logData.push(send); } else if (send.eventType != logData[logData.length - 1].eventType) { logData.push(send); } else { logData[logData.length - 1] = send; } return d; }); }3d:T1b08,function drawMembershipFunction( dataset, mmbshpPara, mmbshpParaTrue, svg, logData ) { svg.selectAll("*").remove(); var attributeCut = mmbshpParaTrue.attributeCut; var height = mmbshpParaTrue.heightLegend; var width = mmbshpParaTrue.widthLegend; var max = mmbshpParaTrue.max; var min = mmbshpParaTrue.min; var n = mmbshpParaTrue.n; var x = d3 .scaleLinear() .domain([min, max]) .range([margin.left, width - margin.right]); var y = d3 .scaleLinear() .domain([0, 1.1]) .range([height * 0.8 - margin.bottom, margin.top]); var svgMbshp = svg .append("svg") .attr("id", "membershipFunction") .attr("width", width) .attr("height", height); var lineData = mmbshpPara.lineData; var dotData = mmbshpPara.dotData; var dotDataSide = mmbshpPara.dotDataSide; var movepoint = mmbshpPara.movepoint; var supportData = mmbshpPara.supportData; // ------------------parameters and scale------------------------------------- // svgMbshp.selectAll("*").remove(); var line = d3 .line() //generator of path .x(d => x(d[0])) .y(d => y(d[1])); // ---------------------------------drag------------------------------------------------------------------------ // ------------------------------------------------------------------------------------------------------------ svgMbshp .append("g") .attr("id", "membershipLine") .selectAll("path") .data(lineData) .enter() .append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("class", "membershipLine") .attr("stroke-linecap", "round") .attr("d", line); // Render gradient colors for memberhsip function;-------------------- renderGrCo(mmbshpParaTrue, lineData, svgMbshp, x, y); // ----------------------------------------------------- svgMbshp .append("g") .attr("id", "dotLine") .selectAll("path") .data(dotData) .enter() .append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", "3,3") .attr("d", line); svgMbshp .append("g") .attr("id", "movecircle") .selectAll("circle") .data(movepoint) .enter() .append("circle") .attr("id", (d, index) => "movecircle_" + index) .attr("cx", d => x(d[0])) .attr("cy", d => y(d[1])) .attr("fill", "black") .attr("r", 5) .raise() .on("mouseover", function() { d3.select(this).attr("r", 7); }) .on("mouseout", function() { d3.select(this).attr("r", 5); }) .call( drag, svgMbshp.node(), line, x, mmbshpPara, mmbshpParaTrue, dataset, logData, y ); // // Drag support------------- svgMbshp .append("g") .attr("id", "supportcircleEdgeMin") .selectAll("circle") .data(supportData.slice(1, supportData.length - 1)) .enter() .append("circle") .attr("id", (d, index) => "min_" + d.id) .attr("cx", d => x(d.edgeMin)) .attr("cy", d => y(0)) .attr("fill", "black") .attr("r", 5) .raise() .on("mouseover", function() { d3.select(this).attr("r", 7); }) .on("mouseout", function() { d3.select(this).attr("r", 5); }) .call( dragSupport, svgMbshp.node(), line, x, mmbshpPara, mmbshpParaTrue, dataset, logData, y ); svgMbshp .append("g") .attr("id", "supportcircleEdgeMax") .selectAll("circle") .data(supportData.slice(1, supportData.length - 1)) .enter() .append("circle") .attr("id", (d, index) => "max_" + d.id) .attr("cx", d => x(d.edgeMax)) .attr("cy", d => y(0)) .attr("fill", "black") .attr("r", 5) .raise() .on("mouseover", function() { d3.select(this).attr("r", 7); }) .on("mouseout", function() { d3.select(this).attr("r", 5); }) .call( dragSupport, svgMbshp.node(), line, x, mmbshpPara, mmbshpParaTrue, dataset, logData, y ); svgMbshp .select("#supportcircleEdgeMax") .append("circle") .datum(supportData[0]) .attr("id", "max_0") .attr("cx", d => x(d.edgeMax)) .attr("cy", d => y(0)) .attr("fill", "black") .attr("r", 5) .raise() .on("mouseover", function() { d3.select(this).attr("r", 7); }) .on("mouseout", function() { d3.select(this).attr("r", 5); }) .call( dragSupport, svgMbshp.node(), line, x, mmbshpPara, mmbshpParaTrue, dataset, logData, y ); svgMbshp .select("#supportcircleEdgeMin") .append("circle") .datum(supportData[supportData.length - 1]) .attr("id", "min_" + (n - 1)) .attr("cx", d => x(d.edgeMin)) .attr("cy", d => y(0)) .attr("fill", "black") .attr("r", 5) .raise() .on("mouseover", function() { d3.select(this).attr("r", 7); }) .on("mouseout", function() { d3.select(this).attr("r", 5); }) .call( dragSupport, svgMbshp.node(), line, x, mmbshpPara, mmbshpParaTrue, dataset, logData, y ); var xAxis = d3.axisBottom(x); var yAxis = d3.axisLeft(y).ticks(5); svgMbshp .append('g') .attr('transform', "translate(0," + y(0) + ")") // .classed('x axis', true) .attr("class", "axis") .style("font-size", "15px") .call(xAxis); svgMbshp .append('g') .attr('transform', "translate(" + x(min) + ",0)") // .classed('y axis', true) .attr("class", "axis") .style("font-size", "15px") .call(yAxis); svgMbshp .append("text") .attr("x", x(max) * 0.99) .attr("y", y(0.04)) .attr("font-family", "sans-serif") .attr("class", "membershipLine") .attr("font-size", "15px") .text(attributeCut) .attr("text-anchor", "end"); svgMbshp .append("text") .attr("x", x(min)) .attr("y", y(1.05)) .attr("dx", 3) .attr("font-family", "sans-serif") .attr("class", "membershipLine") .attr("font-size", "15px") .text("Degree") .attr("text-anchor", "start"); let divData = { dataCategory: mmbshpPara, parameter: mmbshpParaTrue, logData: logData, dataNewAttribute: addPara2Dataset(dataset, mmbshpPara, mmbshpParaTrue) }; // // visualize input widgets(All related to input name)------------------------------- let inputField = d3 .select(svg.node().parentElement.parentElement.parentElement) .select("#inputName"); rendInputName(divData, inputField, x, y); // // visualize editable rectangles--------------------------------- drawEditName(svgMbshp, divData, x, y); return svg.node(); }3e:Ta18,function rendInputName(data, svg, x, y) { // debugger; // minlength="4" maxlength="8" svg.selectAll("*").remove(); // debugger; // // Create the element with name data----------------------- // renderName(svg, data.dataCategory.name); // -------------------------------------- // debugger; svg .selectAll("input") .data(data.dataCategory.overlapData) .enter() .append("span") .append("label") .style("display", "inline-block") // .style("width", "30px") .text((d, index) => " " + "C" + index + ": ") .style("font-size", "0.8rem") .attr("width", "0.5em") .append("input") .style("width", "10em") .attr("value", d => d.name) .attr("type", "text") .style("background-color", "#f2f2f2") .on("change", (d, index) => { // // generate log data; const inputname = svg .selectAll("span") .nodes() [index].getElementsByTagName("input")[0].value; var send = new DataGene('Input', inputname); if (data.logData.length == 0) { data.logData.push(send); } else if ( send.eventType != data.logData[data.logData.length - 1].eventType ) { data.logData.push(send); } else { // data.logData[data.logData.length - 1] = send; data.logData.push(send); } // // Change the data of element name-data(save the namedata)--------------------------------------------------- let nameData = d3 .select(svg.node().parentNode.parentNode) .select("#name-data") .node().__data__; let indexId = nameData.findIndex( d => d.id == data.dataCategory.overlapData[index].id ); nameData[indexId].name = svg .selectAll("span") .nodes() [index].getElementsByTagName("input")[0].value; d3.select(svg.node().parentNode.parentNode) .select("#name-data") .datum(nameData); // //--------------------------------------- data.dataCategory.overlapData[index].name = svg .selectAll("span") .nodes() [index].getElementsByTagName("input")[0].value; let svgEditName = d3 .select(svg.node().parentElement.parentElement) .select("#membershipFunction"); drawEditName(svgEditName, data, x, y); addPara2Dataset(data.dataNewAttribute, data.dataCategory, data.parameter); svg.node().parentElement.parentElement.value = data; svg .node() .parentElement.parentElement.dispatchEvent(new CustomEvent("input")); }); }3f:T63c,function drawEditName(svg, data, x, y) { // svg--- hang on node's selection // data--- The output data package of this tool, which including logData, parameter, dataCatagory, etc. // x and y are scales // debugger; svg.select("#svg-edit").remove(); let editSvg = svg.append("svg").attr("id", "svg-edit"); editSvg .append("g") .attr("id", "edit-rect") .selectAll("rect") .data(data.dataCategory.overlapData) .enter() .append("rect") .attr("x", d => x(d.edgeMin)) .attr("y", y(-0.2)) .attr("width", d => x(d.edgeMax) - x(d.edgeMin)) .attr("height", y(0) - y(0.15)) .attr("fill", "white") .attr('stroke', 'black'); editSvg .selectAll("text") .data(data.dataCategory.overlapData) .enter() .append("text") .attr("class", "edit-text") .attr("x", d => x(d.edgeMin) + (x(d.edgeMax) - x(d.edgeMin)) / 2) .attr("y", y(-0.3)) // .attr("contentEditable", "") .attr("font-size", "0.8rem") .attr("text-anchor", "middle") .text(d => d.name) .on('DOMSubtreeModified', function(d, index, node) { // debugger; d.name = node[index].textContent; addPara2Dataset(data.dataNewAttribute, data.dataCategory, data.parameter); this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.value = data; this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.dispatchEvent( new CustomEvent("input") ); data; }); editableSVG(editSvg.node(), "text[contentEditable]"); return editSvg; }40:T6c48,function shpFunCreat(dataset, mmbshpPara) { // ------------------parameters and scale------------------------------------- var n = mmbshpPara.n; var attributeCut = mmbshpPara.attributeCut; // the used attributes in raw dataset var max = mmbshpPara.max; var min = mmbshpPara.min; var core = mmbshpPara.core; // it can be changed, can be selected var support = mmbshpPara.support; // it is less than core + 2 * intercom, can be selected var intercom = (max - min) / n - core; // calculated by core var rangBottom = (support - core) / 2; // var core = 0;112233 var range = [min, max]; var numOAlpha; var alpha = mmbshpPara.lambda; // 0 < alpha < 1 var maxNum; //the number of max category var traParaMmb = new traPara(n, core, range); // the parameters of membership funcion var categoryIndex = []; // it includes index of each edge of category, [x-axis, alpha], right represents that this alpha points is on the line of its right function scope var categoryDataset = []; // create the category dataset, which put all attributes of fuzzy sets and the element indexs into this parameter. var coreData = []; var supportData = []; var lambdaIndex = []; var overlapData = []; // ---------------------------------------------------create crispColor--------------------------- var crispColor = [d3.interpolateGreens(0.5)]; // the length of crispColor is equal to n for (var i = 0; i < n - 2; i++) { crispColor.push(d3.interpolateGreens(0.5 + (0.5 / (n - 1)) * (i + 1))); } crispColor.push(d3.interpolateGreens(1)); // -----------------create coredata, lambdaIndex, categoryIndex and draw line chart----------------------- var movepoint = []; // the dragging points dataset; var lineData = []; // membership function line dataset; var dotData = []; // Dot line datasets; var dotDataSide = []; // the part of dot data when i == 0 or i == n; var ilineData = 0; // the index of line data var idotData = 0; // the index of dot data var idotDataSide = 0; // the index of dot data when i == 0 or i == n; function creatData() { for (var i = 1; i <= n; i++) { // // create left1, left2, right1 and right2------------------------- var left1 = min + core + 0.5 * intercom + (i - 2) * (core + intercom) + intercom - rangBottom; // it is less than left2 var left2 = min + core + 0.5 * intercom + (i - 2) * (core + intercom) + intercom; var right1 = min + core + 0.5 * intercom + (i - 2) * (core + intercom) + intercom + core; var right2 = min + core + 0.5 * intercom + (i - 2) * (core + intercom) + intercom + core + rangBottom; // // Separate three kinds of situations, they are i ==1, i>1, i == n------------------ // // if i == 1, we calculate those kinds of datasets------------------------------- if (i == 1) { movepoint.push([min + core + 0.5 * intercom, 1]); categoryIndex.push([min, 1, 'right', i, crispColor[i - 1]]); // debugger; lineData[ilineData] = [ [min, 1], [min + core + 0.5 * intercom, 1], [min + core + 0.5 * intercom + rangBottom, 0] ]; ilineData++; categoryIndex.push([ min + core + 0.5 * intercom, 1, 'left', i, crispColor[i - 1] ]); categoryIndex.push([ right1 + rangBottom * (1 - alpha), alpha, 'left', i, crispColor[i - 1] ]); dotData[idotData] = [ [min + core + 0.5 * intercom, 1], [min + core + 0.5 * intercom, 0] ]; idotData++; categoryIndex.push([ right1 + rangBottom, 0, 'left', i, crispColor[i - 1] ]); coreData.push({ edgeMin: min, edgeMax: right1 }); overlapData.push({ edgeMin: min, edgeMax: right1, membershipValue: 1 }); supportData.push({ edgeMin: min, edgeMax: right2 }); lambdaIndex.push([min, 'goUp']); lambdaIndex.push([right1 + rangBottom * (1 - alpha), 'goDown']); } // // when i > 1 and i < n, how to calculate those datasets? ---------------------------------- if (i > 1 && i < n) { movepoint.push([left2, 1]); movepoint.push([right1, 1]); lineData[ilineData] = [ [left1, 0], [left2, 1], [right1, 1], [right2, 0] ]; ilineData++; // lineData.push([left1, 0], [left2, 1], [right1, 1], [right2, 0]); categoryIndex.push([left1, 0, 'right', i, crispColor[i - 1]]); categoryIndex.push([ left1 + alpha * rangBottom, alpha, 'right', i, crispColor[i - 1] ]); categoryIndex.push([left2, 1, 'right', i, crispColor[i - 1]]); categoryIndex.push([right1, 1, 'left', i, crispColor[i - 1]]); categoryIndex.push([ right1 + rangBottom * (1 - alpha), alpha, 'left', i, crispColor[i - 1] ]); categoryIndex.push([ right1 + rangBottom, 0, 'left', i, crispColor[i - 1] ]); dotData[idotData] = [[left2, 0], [left2, 1]]; idotData++; coreData.push({ edgeMin: left2, edgeMax: right1 }); if (supportData[i - 2]["edgeMax"] > left1) { let membershipValue = (supportData[i - 2]["edgeMax"] - left1) / ((left2 - coreData[i - 2]["edgeMax"]) * 2); let membershipValueNoOverlap = ((supportData[i - 2]["edgeMax"] - left1) / (supportData[i - 2]["edgeMax"] - coreData[i - 2]["edgeMax"]) + 1) / 2; // if (supportData[i - 2]["edgeMax"] < left2) { overlapData.push({ edgeMin: coreData[i - 2]["edgeMax"], edgeMax: left1, membershipValue: membershipValueNoOverlap }); // } overlapData.push({ edgeMin: left1, edgeMax: supportData[i - 2]["edgeMax"], membershipValue: membershipValue }); // if (supportData[i - 2]["edgeMax"] < left2) { overlapData.push({ edgeMin: supportData[i - 2]["edgeMax"], edgeMax: left2, membershipValue: 0.5 }); // } } else { // if (left1 < left2) { overlapData.push({ edgeMin: coreData[i - 2]["edgeMax"], edgeMax: supportData[i - 2]["edgeMax"], membershipValue: 0.5 }); // } overlapData.push({ edgeMin: supportData[i - 2]["edgeMax"], edgeMax: left1, membershipValue: 0 }); // if (left1 < left2) { overlapData.push({ edgeMin: left1, edgeMax: left2, membershipValue: 0.5 }); // } } overlapData.push({ edgeMin: left2, edgeMax: right1, membershipValue: 1 }); supportData.push({ edgeMin: left1, edgeMax: right2 }); lambdaIndex.push([left1 + alpha * rangBottom, 'goUp']); lambdaIndex.push([right1 + rangBottom * (1 - alpha), 'goDown']); // dotDataSide.push([left2, 1], [left2, 0]); // if (core != 0) { // dotDataSide.push([right1, 1], [right1, 0]); dotDataSide[idotDataSide] = [[right1, 1], [right1, 0]]; idotDataSide++; // } } // // Calculate those datasets when i == n ------------------------------------------------------------- if (i == n) { movepoint.push([left2, 1]); lineData[ilineData] = [[left1, 0], [left2, 1], [max, 1], [max, 0]]; dotData[idotData] = [[left2, 1], [left2, 0]]; categoryIndex.push([left1, 0, 'right', i, crispColor[i - 1]]); categoryIndex.push([ left1 + alpha * rangBottom, alpha, 'right', i, crispColor[i - 1] ]); categoryIndex.push([left2, 1, 'right', i, crispColor[i - 1]]); categoryIndex.push([max, 1, 'left', i, crispColor[i - 1]]); coreData.push({ edgeMin: left2, edgeMax: max }); if (supportData[i - 2]["edgeMax"] > left1) { let membershipValue = (supportData[i - 2]["edgeMax"] - left1) / ((left2 - coreData[i - 2]["edgeMax"]) * 2); let membershipValueNoOverlap = ((supportData[i - 2]["edgeMax"] - left1) / (supportData[i - 2]["edgeMax"] - coreData[i - 2]["edgeMax"]) + 1) / 2; // if (supportData[i - 2]["edgeMax"] < left2) { overlapData.push({ edgeMin: coreData[i - 2]["edgeMax"], edgeMax: left1, membershipValue: membershipValueNoOverlap }); // } overlapData.push({ edgeMin: left1, edgeMax: supportData[i - 2]["edgeMax"], membershipValue: membershipValue }); // if (supportData[i - 2]["edgeMax"] < left2) { overlapData.push({ edgeMin: supportData[i - 2]["edgeMax"], edgeMax: left2, membershipValue: 0.5 }); // } } else { // if (left1 < left2) { overlapData.push({ edgeMin: coreData[i - 2]["edgeMax"], edgeMax: supportData[i - 2]["edgeMax"], membershipValue: 0.5 }); // } overlapData.push({ edgeMin: supportData[i - 2]["edgeMax"], edgeMax: left1, membershipValue: 0 }); // if (left1 < left2) { overlapData.push({ edgeMin: left1, edgeMax: left2, membershipValue: 0.5 }); // } } overlapData.push({ edgeMin: left2, edgeMax: max, membershipValue: 1 }); supportData.push({ edgeMin: left1, edgeMax: max }); lambdaIndex.push([left1 + alpha * rangBottom, 'goUp']); lambdaIndex.push([max, 'goDown']); } } dotData = dotData.concat(dotDataSide); dotData.sort((a, b) => a[0][0] - b[0][0]); // ------------------------------------------------------------------------------------------------------------ var lambdaData = []; for (var i = 0; i < lambdaIndex.length - 1; i++) { if (lambdaIndex[i][1] == "goUp" && lambdaIndex[i + 1][1] == "goDown") { lambdaData.push({ edgeMin: lambdaIndex[i][0], edgeMax: lambdaIndex[i + 1][0], trend: "up" }); continue; } if (lambdaIndex[i][1] == "goDown" && lambdaIndex[i + 1][1] == "goUp") { lambdaData.push({ edgeMin: lambdaIndex[i][0], edgeMax: lambdaIndex[i + 1][0], trend: "down" }); continue; } } // delete the same edge and sort categoryIndex categoryIndex = unique(categoryIndex); categoryIndex.sort(function(a, b) { return a[0] - b[0]; }); // debugger; // draw lines for separating the fuzzy sets for (var i = 0; i < categoryIndex.length; i++) { if (categoryIndex[i][1] < 1) { } } function find(array, val) { var idx = 0, i = 0, j = array.length; for (i; i < j; i++) { if (array[i] > val) { idx = i - 1; break; } } return idx; } var arry = categoryIndex.map(d => d[0]); // create subsets dataset, with degree, interval, elements, etc. function CategoryDataGene( id, degree, levelSet, interval, comFuzzy, elements ) { this.id = id; this.degree = degree; this.levelSet = levelSet; this.interval = interval; // this.alphaInterval = alphaInterval; this.comFuzzy = comFuzzy; this.elements = elements; } for (var i = 0; i < categoryIndex.length - 1; i++) { var id = i; var levelSet; if (categoryIndex[i][1] == 1 && categoryIndex[(i + 1, 1)] == 1) { levelSet = 1; } else { levelSet = 2; } // if(i == 1) debugger var interval = [categoryIndex[i][0], categoryIndex[i + 1][0]]; var degree = {}; var xd = (interval[0] + interval[1]) / 2; var card = cardFun(dataset, mmbshpPara, xd); if (count(card, 0) == 1 && card[card.length - 1] != 0) { degree.all = false; degree.mid = false; degree.nei = true; } if (count(card, 0) == 1 && card[card.length - 1] == 0) { degree.all = true; degree.mid = false; degree.nei = false; } if (count(card, 0) == 2 && card[card.length - 1] != 0) { degree.all = false; degree.mid = true; degree.nei = true; } if (count(card, 0) == 2 && card[card.length - 1] == 0) { degree.all = false; degree.mid = true; degree.nei = false; } if (count(card, 0) == 3) { degree.all = false; degree.mid = true; degree.nei = true; } var comFuzzy = []; // inludes the color information and percentage belonging to 'left crisp set','right crisp set' and 'gap'; They are represented by color; comFuzzy["colorLeft"] = categoryIndex[i][4]; comFuzzy["colorRight"] = categoryIndex[i + 1][4]; comFuzzy["colorGap"] = 'black'; //---------------------------------------------------------------------------- // debugger; if ( categoryIndex[i][2] == categoryIndex[i + 1][2] && categoryIndex[i][4] == categoryIndex[i + 1][4] ) { if (categoryIndex[i][2] == 'left') { comFuzzy["percentLeft"] = (categoryIndex[i + 1][1] + categoryIndex[i][1]) / 2; var j = core + 0.5 * intercom + (categoryIndex[i][3] + 1 - 2) * (core + intercom) + intercom - rangBottom; // debugger; if (j.toFixed(12) - categoryIndex[i + 1][0].toFixed(12) >= 0) { comFuzzy["percentRight"] = 0; } else comFuzzy["percentRight"] = 1 - comFuzzy["percentRight"]; } if (categoryIndex[i][2] == 'right') { comFuzzy["percentRight"] = (categoryIndex[i + 1][1] + categoryIndex[i][1]) / 2; var j = core + 0.5 * intercom + (categoryIndex[i][3] - 1 - 2) * (core + intercom) + intercom + core + rangBottom; if (j.toFixed(12) - categoryIndex[i][0].toFixed(12) <= 0) { comFuzzy["percentLeft"] = 0; } else comFuzzy["percentLeft"] = 1 - comFuzzy["percentLeft"]; } comFuzzy['gap'] = 1 - comFuzzy["percentLeft"] - comFuzzy["percentRight"]; } // ------------------------------------------------------------- if ( categoryIndex[i][2] == categoryIndex[i + 1][2] && categoryIndex[i][4] != categoryIndex[i + 1][4] ) { comFuzzy["percentLeft"] = 1; comFuzzy["percentRight"] = 0; comFuzzy['gap'] = 0; } if ( categoryIndex[i][2] != categoryIndex[i + 1][2] && categoryIndex[i][4] != categoryIndex[i + 1][4] ) { //left-right if ( categoryIndex[i][2] == 'left' && categoryIndex[i + 1][2] == 'right' ) { if (categoryIndex[i][1] == 0) { comFuzzy["percentLeft"] = 0; } else { comFuzzy["percentLeft"] = (categoryIndex[i][1] * 2 - (categoryIndex[i + 1][0] - categoryIndex[i][0]) / rangBottom) / 2; } if (categoryIndex[i + 1][1] == 0) { comFuzzy["percentRight"] = 0; } else { comFuzzy["percentRight"] = (categoryIndex[i + 1][1] * 2 - (categoryIndex[i + 1][0] - categoryIndex[i][0]) / rangBottom) / 2; } comFuzzy['gap'] = 1 - comFuzzy["percentLeft"] - comFuzzy["percentRight"]; } //right-left if ( categoryIndex[i][2] == 'right' && categoryIndex[i + 1][2] == 'left' ) { comFuzzy["percentLeft"] = (categoryIndex[i + 1][1] * 2 + (categoryIndex[i + 1][0] - categoryIndex[i][0]) / rangBottom) / 2; comFuzzy["percentRight"] = (categoryIndex[i][1] * 2 + (categoryIndex[i + 1][0] - categoryIndex[i][0]) / rangBottom) / 2; comFuzzy['gap'] = 1 - comFuzzy["percentLeft"] - comFuzzy["percentRight"]; } } if ( categoryIndex[i][2] != categoryIndex[i + 1][2] && categoryIndex[i][4] == categoryIndex[i + 1][4] ) { comFuzzy["percentLeft"] = 1; comFuzzy["percentRight"] = 0; comFuzzy['gap'] = 0; } var elements = []; var dataTem = new CategoryDataGene( id, degree, levelSet, interval, comFuzzy, elements ); categoryDataset.push(dataTem); } for (var i = 0; i < dataset.length; i++) { // console.log(i) // if(i == 344) debugger // debugger // dataset[i]["categoryId"] = find(arry, dataset[i][attributeCut]); // debugger; categoryDataset[find(arry, dataset[i][attributeCut])].elements.push(i); } // svgMbshp.exit().remove(); function addColorToCategory(minbin, interval) { // var coreData = mmbshpOutput[2]; var a = minbin.interval[0], b = minbin.interval[1]; var c = (a + b) / 2; var colorBin = []; var colorBin1 = []; for (var i = 0; i < interval.length; i++) { var distance; var valueMembership; if (c > interval[i][0] && c < interval[i][1]) { if (i == 0) { if (c > +coreData[0].edgeMin && c <= +coreData[0].edgeMax) { valueMembership = 1; distance = 0; } if (c > +coreData[0].edgeMax && c <= interval[0][1]) { valueMembership = (interval[0][1] - c) / (interval[0][1] - +coreData[0].edgeMax); distance = c - coreData[i].edgeMax; } } else if (i == interval.length - 1) { // distance = c - interval[i][1]; if (c >= interval[i][0] && c < +coreData[i].edgeMin) { valueMembership = (c - interval[i][0]) / (+coreData[i].edgeMin - interval[i][0]); distance = c - +coreData[i].edgeMin; } if (c >= +coreData[i].edgeMin) { valueMembership = 1; distance = 0; } } else { distance = c - (interval[i][0] + interval[i][1]) / 2; if (c >= +coreData[i].edgeMin && c <= +coreData[i].edgeMax) { valueMembership = 1; distance = 0; } if (c > +coreData[i].edgeMax && c <= interval[i][1]) { valueMembership = (interval[i][1] - c) / (interval[i][1] - +coreData[i].edgeMax); distance = c - +coreData[i].edgeMax; } if (c >= interval[i][0] && c < +coreData[i].edgeMin) { valueMembership = (c - interval[i][0]) / (+coreData[i].edgeMin - interval[i][0]); distance = +coreData[i].edgeMin - c; } } colorBin.push([Math.abs(distance), i]); colorBin1.push([valueMembership, i]); } else { } } return colorBin1; } categoryDataset = categoryDataset.filter( d => Math.abs(d.interval[0] - d.interval[1]) / (categoryDataset[0].interval[1] - categoryDataset[0].interval[0]) > 0.01 ); for (var i = 0; i < categoryDataset.length; i++) { categoryDataset[i].comFuzzy.categoryID = []; var index = 0; for (var j = 0; j <= i; j++) { categoryDataset[j].degree.all == true ? index++ : index; } if (categoryDataset[i].degree.all == true) { categoryDataset[i].comFuzzy.categoryID.push(index - 1); } else { categoryDataset[i].comFuzzy.categoryID.push(index - 1); categoryDataset[i].comFuzzy.categoryID.push(index); } } // ---------------------------------calculate lambdaData1 based on coreData and supportData var lambdaData1 = (function() { var lambdaData1 = []; for (var i = 0; i < n; i++) { if (i == 0) { lambdaData1.push({ edgeMin: coreData[i].edgeMin, edgeMax: Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)), confidenceRange: '>' + alpha, class: i }); lambdaData1.push({ edgeMin: Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)), edgeMax: supportData[i].edgeMax, confidenceRange: '>' + alpha, class: i }); } else if (i > 0 && i < n - 1) { lambdaData1.push({ edgeMin: supportData[i].edgeMin, edgeMax: Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)), confidenceRange: '<' + alpha, class: i }); lambdaData1.push({ edgeMin: Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)), edgeMax: Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)), edgeMax: supportData[i].edgeMax, confidenceRange: '>' + alpha, class: i }); lambdaData1.push({ edgeMin: Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)), edgeMax: supportData[i].edgeMax, confidenceRange: '<' + alpha, class: i }); } else { lambdaData1.push({ edgeMin: supportData[i].edgeMin, edgeMax: Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)), confidenceRange: '<' + alpha, class: i }); lambdaData1.push({ edgeMin: Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)), edgeMax: max, confidenceRange: '>' + alpha, class: i }); } // debugger; } for (var i = lambdaData1.length - 1; i >= 0; i--) { if (lambdaData1[i].edgeMin == lambdaData1[i].edgeMax) { lambdaData1.splice(i, 1); } } return lambdaData1; })(); // ---------------------------------------------------------------------------------------------- coreData.map((d, index) => { d.edgeMin = d.edgeMin; d.edgeMax = d.edgeMax; d.id = index; return d; }); overlapData.map((d, index) => { d.id = index; d.edgeMin = d.edgeMin; d.edgeMax = d.edgeMax; d.membershipValue = d.membershipValue; return d; }); // // Create the name dataset to save the name for overlapData------------------------------------ let name = []; for (var i = 0; i < overlapData.length; i++) { name.push({ id: i }); } name.map((d, index) => { // if (index == 2) debugger; if (d.id % 2 == 0 && (d.id / 2) % 2 == 0) { d.name = "C" + d.id / 4; } else if (d.id % 2 == 0 && (d.id / 2) % 2 != 0) { // if (Number(d.membershipValue) - 0 > 0.001) { d.name = "C" + Math.floor(d.id / 4) + "C" + Math.ceil(d.id / 4); // } else { // d.name = "CN"; // } } else if (((d.id - 1) / 2) % 2 == 0) { d.name = "C" + Math.floor(d.id / 4); } else { let rname = Math.floor(d.id / 4) + 1; d.name = "C" + rname; } return d; }); // // delete the categories that have intervals with almost 0 // debugger; for (var i = 0; i < overlapData.length; i++) { if ( Math.abs(overlapData[i].edgeMax - overlapData[i].edgeMin) < (coreData[0].edgeMax - coreData[0].edgeMin) * 0.01 ) { delete overlapData[i]; } } // // Add names for overlapData items; var overlapDataEmpty = overlapData; overlapData = overlapData.filter(d => d != undefined); // overlapData.map((d, index) => (d.name = "C" + index)); // debugger; overlapData.map((d, index) => { // if (index == 2) debugger; if (d.id % 2 == 0 && (d.id / 2) % 2 == 0) { d.name = "C" + d.id / 4; } else if (d.id % 2 == 0 && (d.id / 2) % 2 != 0) { // if (Number(d.membershipValue) - 0 > 0.001) { d.name = "C" + Math.floor(d.id / 4) + "C" + Math.ceil(d.id / 4); // } else { // d.name = "CN"; // } } else if (((d.id - 1) / 2) % 2 == 0) { d.name = "C" + Math.floor(d.id / 4); } else { let rname = Math.floor(d.id / 4) + 1; d.name = "C" + rname; } return d; }); // debugger; supportData.map((d, index) => { d.edgeMin = d.edgeMin; d.edgeMax = d.edgeMax; d.id = index; return d; }); lambdaData.map((d, index) => { d.edgeMin = d.edgeMin; d.edgeMax = d.edgeMax; d.id = index; return d; }); lambdaData1.map((d, index) => { d.edgeMin = d.edgeMin; d.edgeMax = d.edgeMax; // d.id = index; return d; }); categoryDataset.map(d => { d.edgeMin = d.interval[0]; d.edgeMax = d.interval[1]; d.edgeMin = d.edgeMin; d.edgeMax = d.edgeMax; delete d.interval; return d; }); // debugger; categoryDataset.map(d => { var minbin = { interval: [+d.edgeMin, +d.edgeMax] }; var interval = new Array(supportData.length); for (var i = 0; i < supportData.length; i++) { interval[i] = [+supportData[i].edgeMin, +supportData[i].edgeMax]; } d.membershipValue = addColorToCategory(minbin, interval); return d; }); lineData.map((d, index) => (d.id = index)); dotData.map((d, index) => (d.id = index)); movepoint.map((d, index) => (d.id = index)); return { categoryDataset: categoryDataset, overlapData: overlapData, overlapDataEmpty: overlapDataEmpty, coreData: coreData, supportData: supportData, lambdaData1: lambdaData1, lambdaData: lambdaData, lineData: lineData, dotData: dotData, movepoint: movepoint, name: name }; } creatData.dotData = function(_) { if (!arguments.length) return creatData(); dotData = _; return creatData(); }; return creatData(); }41:T3e70,drag = { return function(g, svg, line, x, data, mmbshpPara, dataset, logData, y) { var xOrigin, index; // original position before dragging, x axis. index is the index of movecircle var widthCoreSupport; // The distance between core points and support poitns; // drag start---------------------- function dragstarted(d) { d3.select(this) .attr("stroke", "black") .attr("r", 5); if (d3.select(this).node().parentElement.id == "supportcircleEdgeMax") { var xoriginal = d3.select(this).data()[0]["edgeMax"]; } else if ( d3.select(this).node().parentElement.id == "supportcircleEdgeMin" ) { var xoriginal = d3.select(this).data()[0]["edgeMin"]; } else { var xoriginal = d3.select(this).data()[0][0]; } // debugger; // // Calculate the distance between core point and support point, which is 2 times of (support - core)--------- // debugger; var idNumber = d3.select(this).data()[0].id; var numberN = Math.ceil(idNumber / 2); var pointDirection = idNumber % 2 == 0 ? "right" : "left"; if (pointDirection == "right") { var bottomPoint = Number(data.supportData[numberN].edgeMax); widthCoreSupport = Number( Math.abs(d3.select(this).data()[0][0] - bottomPoint).toFixed(2) ); } else if (pointDirection === "left") { var bottomPoint = Number(data.supportData[numberN].edgeMin); widthCoreSupport = Number( Math.abs(d3.select(this).data()[0][0] - bottomPoint).toFixed(2) ); } //---------------------------------------------------------------------------------- for ( var i = 0; i < d3 .select(svg) .select("#movecircle") .node().children.length; i++ ) { var value = +d3 .select(svg) .select("#movecircle") .node() .children[i].getAttribute("cx"); if (value.toFixed(4) == x(xoriginal).toFixed(4)) { index = i; break; } } xOrigin = Number(xoriginal); } // drag------------------------------------- function dragged(d) { // // Define variables---------------- var idNumber = d3.select(this).data()[0].id; // the index based on the number of circles var numberN = Math.ceil(idNumber / 2); // the index based on the number of categories var pointDirection = idNumber % 2 == 0 ? "right" : "left"; //the position of this movecircle, related to core data. if (pointDirection == "right") { // // drag right points----------------------------------------- // // The value of dragging point-------------- var limitationDrag = Math.max( Number(data.coreData[numberN].edgeMin), Math.min( x.invert(d3.event.x), Number(data.supportData[numberN + 1].edgeMin) ) ); // // The corresponding support point var bottomPoint = Math.max( Number(data.coreData[numberN].edgeMax), Math.min( Number(limitationDrag + widthCoreSupport), Number(data.coreData[numberN + 1].edgeMin) ) ); // // Render the dragging circle--------------------------------- d3.select(this).attr("cx", x(limitationDrag)); d3.select(this).data()[0][0] = limitationDrag; d3.select(d3.select(this).node().parentElement.parentElement) .select("#max_" + numberN) .attr("cx", x(bottomPoint)); // updata lineData----------------------------------------------- data.lineData[numberN][ data.lineData[numberN].length - 1 ][0] = bottomPoint; data.lineData[numberN][ data.lineData[numberN].length - 2 ][0] = limitationDrag; // // update supportData---------------------- data.supportData[numberN].edgeMax = bottomPoint; // // update coreData------------------------- data.coreData[numberN].edgeMax = limitationDrag; // // generate movepoint data--------------------------------------- // debugger; data.movepoint.map(d => { if (xOrigin == d[0].toFixed(4)) { d[0] = limitationDrag; return d; } }); // // update overlapData--------------------------------- let inputTextRect = d3 .select(svg.getElementById("svg-edit")) .node() .getElementsByClassName("edit-text"); data.overlapData = calOverlapData( data.coreData, data.supportData, data.overlapData, inputTextRect ); } else if (pointDirection === "left") { // // drag left points------------------------------------------- var limitationDrag = Math.max( Number(data.supportData[numberN - 1].edgeMax), Math.min(x.invert(d3.event.x), Number(data.coreData[numberN].edgeMax)) ); var bottomPoint = Math.max( data.coreData[numberN - 1].edgeMax, Math.min( limitationDrag - widthCoreSupport, data.coreData[numberN].edgeMin ) ); // // Render the dragging circle-------------------------------- d3.select(this).attr("cx", x(limitationDrag)); d3.select(this).data()[0][0] = limitationDrag; d3.select(d3.select(this).node().parentElement.parentElement) .select("#min_" + numberN) .attr("cx", x(bottomPoint)); // // updata lineData---------------------------------------- data.lineData[numberN][0][0] = bottomPoint; data.lineData[numberN][1][0] = limitationDrag; // // update supportData-------------------------------------- data.supportData[numberN].edgeMin = bottomPoint; // // update coreData---------------------------------------------- data.coreData[numberN].edgeMin = limitationDrag; // // generate movepoint data--------------------------------------- // debugger; data.movepoint.map(d => { if (xOrigin == d[0].toFixed(4)) { d[0] = limitationDrag; return d; } }); // //update overlapData------------------------------------------ debugger; let inputTextRect = d3 .select(svg.getElementById("svg-edit")) .node() .getElementsByClassName("edit-text"); data.overlapData = calOverlapData( data.coreData, data.supportData, data.overlapData, inputTextRect ); } // // generate dotData-------------------- data.dotData[idNumber][0][0] = limitationDrag; data.dotData[idNumber][1][0] = limitationDrag; // // generate categoryDataset-------------------- data.categoryDataset.map(d => { if (xOrigin == d.edgeMin) { d.edgeMin = x.invert(d3.event.x); } if (xOrigin == d.edgeMax) { d.edgeMax = x.invert(d3.event.x); } return d; }); // // generate lambdaData;------------------------------------------------- data.lambdaData.map(d => { if (xOrigin == d.edgeMin) { d.edgeMin = x.invert(d3.event.x); } if (xOrigin == d.edgeMax) { d.edgeMax = x.invert(d3.event.x); } return d; }); // // generate lambdaData1----------------------------------------------------- data.lambdaData1 = (function() { var lambdaData1 = []; var n = mmbshpPara.n; var coreData = data.coreData; var alpha = mmbshpPara.lambda; var supportData = data.supportData; var max = mmbshpPara.max; for (var i = 0; i < n; i++) { if (i == 0) { lambdaData1.push({ edgeMin: coreData[i].edgeMin.toString(), edgeMax: ( Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)) ).toString(), confidenceRange: '>' + alpha, class: i }); lambdaData1.push({ edgeMin: ( Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)) ).toString(), edgeMax: supportData[i].edgeMax.toString(), confidenceRange: '<' + alpha, class: i }); } else if (i > 0 && i < n - 1) { lambdaData1.push({ edgeMin: supportData[i].edgeMin.toString(), edgeMax: ( Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)) ).toString(), confidenceRange: '<' + alpha, class: i }); lambdaData1.push({ edgeMin: ( Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)) ).toString(), edgeMax: ( Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)) ).toString(), edgeMax: supportData[i].edgeMax.toString(), confidenceRange: '>' + alpha, class: i }); lambdaData1.push({ edgeMin: ( Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)) ).toString(), edgeMax: supportData[i].edgeMax.toString(), confidenceRange: '<' + alpha, class: i }); } else { lambdaData1.push({ edgeMin: supportData[i].edgeMin.toString(), edgeMax: ( Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)) ).toString(), confidenceRange: '<' + alpha, class: i }); lambdaData1.push({ edgeMin: ( Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)) ).toString(), edgeMax: max.toString(), confidenceRange: '>' + alpha, class: i }); } } for (var i = lambdaData1.length - 1; i >= 0; i--) { if (lambdaData1[i].edgeMin == lambdaData1[i].edgeMax) { lambdaData1.splice(i, 1); } } // debugger; lambdaData1.map((d, index) => { // debugger; d.edgeMin = d.edgeMin; d.edgeMax = d.edgeMax; // d.id = index; return d; }); return lambdaData1; })(); // End of calculate lambdaData1--------------------------------- // // // draw editable rectangles-------------------------------------- let dataNewAttribute = addPara2Dataset(dataset, data, mmbshpPara); var divData = { dataCategory: data, parameter: mmbshpPara, logData: logData, dataNewAttribute: addPara2Dataset(dataset, data, mmbshpPara) }; // debugger; rendInputName( divData, d3 .select(svg.parentElement.parentElement.parentElement.parentElement) .select("#inputName"), x, y ); drawEditName(d3.select(svg), divData, x, y); renderGrCo( divData.parameter, divData.dataCategory.lineData, d3.select(svg), x, y ); // // Draw elements----------------------------------------------------- d3.select(svg) .select("#membershipLine") .selectAll("*") .remove(); d3.select(svg) .select("#membershipLine") .selectAll("path") .data(data.lineData) .enter() .append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("class", "membershipLine") .attr("stroke-linecap", "round") .attr("d", line); d3.select(svg) .select("#dotLine") .selectAll("*") .remove(); d3.select(svg) .select("#dotLine") .selectAll("path") .data(data.dotData) .enter() .append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", "3,3") .attr("d", line); // // Update the sliders maxinmun and minimum----------------------------------- debugger; updtSldsAftDrg({ index: Number(this.id.split("")[this.id.split("").length - 1]), node: svg, data:divData }); svg.parentElement.parentElement.parentElement.parentElement.value = divData; svg.parentElement.parentElement.parentElement.parentElement.dispatchEvent( new CustomEvent("input") ); // return limitationDrag; } function dragended(d) { var idNumber = d3.select(this).data()[0].id; // the index based on the number of circles var numberN = Math.ceil(idNumber / 2); // the index based on the number of categories var pointDirection = idNumber % 2 == 0 ? "right" : "left"; //the position of this movecircle, related to core data. // // Generate the log dage-------------------------------- if (pointDirection == "right") { var limitationDrag = Math.max( Number(data.coreData[numberN].edgeMin), Math.min( x.invert(d3.event.x), Number(data.supportData[numberN + 1].edgeMin) ) ); } else if (pointDirection === "left") { var limitationDrag = Math.max( Number(data.supportData[numberN - 1].edgeMax), Math.min(x.invert(d3.event.x), Number(data.coreData[numberN].edgeMax)) ); } var send = new DataGene( 'core' + "_" + numberN + "_" + pointDirection, limitationDrag ); logData.push(send); // // Return the color and size of circle------------------------- d3.select(this) .attr("stroke", null) .attr("r", 5); // // Dispatch new customEvent("input")-------------------------------------- svg.parentElement.parentElement.parentElement.parentElement.value = divData; svg.parentElement.parentElement.parentElement.parentElement.dispatchEvent( new CustomEvent("input") ); return svg; } var drag = d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); // debugger; var divData = { dataCategory: data, parameter: mmbshpPara, logData: logData, dataNewAttribute: addPara2Dataset(dataset, data, mmbshpPara) }; svg.parentElement.parentElement.parentElement.parentElement.value = divData; svg.parentElement.parentElement.parentElement.parentElement.dispatchEvent( new CustomEvent("input") ); return drag(g); }; }42:T16ab,function calOverlapData(coreData, supportData, overlapDataInput, svg) { // // This function is to calculate the overlapData based on coreData, supportData and previous overlapData; // function findIdName(id, overlapDataInput) { // this function is to calculate the name corresponding to specific id, in overlapDataInput // if (id == 2) debugger; let name; let index = overlapDataInput.findIndex(d => d.id == id); if (index != -1) { name = overlapDataInput[index].name; } else { name = "name"; } return name; } // debugger; // // Calculate all overlapData--------------------- // Add the first item of overlapData; let id = 0; let overlapData = []; overlapData.push({ edgeMin: coreData[0].edgeMin, edgeMax: coreData[0].edgeMax, membershipValue: '1.00', id: id, name: overlapDataInput[0].name }); id = id + 1; // Calculate all overlapData based on the loop of coreData;----------------- for (var i = 1; i < coreData.length; i++) { // Calculate the membership value, including two situations, they are overlap and non-overlap regions; let membershipValueNoOverlap = ( ((supportData[i - 1]["edgeMax"] - supportData[i]["edgeMin"]) / (supportData[i - 1]["edgeMax"] - coreData[i - 1]["edgeMax"]) + 1) / 2 ).toFixed(2); let membershipValueOverlap = ( Math.abs(supportData[i - 1].edgeMax - supportData[i].edgeMin) / (Math.abs(coreData[i - 1].edgeMax - coreData[i].edgeMin) * 2) ).toFixed(2); // debugger; overlapData.push({ edgeMin: coreData[i].edgeMin, edgeMax: coreData[i].edgeMax, membershipValue: '1.00', id: id, name: findIdName(id, overlapDataInput) }); id = id + 1; if (supportData[i - 1].edgeMax > supportData[i].edgeMin) { overlapData.push({ edgeMin: coreData[i - 1].edgeMax, edgeMax: supportData[i].edgeMin, membershipValue: membershipValueNoOverlap, id: id, name: findIdName(id, overlapDataInput) }); id++; overlapData.push({ edgeMin: supportData[i].edgeMin, edgeMax: supportData[i - 1].edgeMax, membershipValue: membershipValueOverlap, id: id, name: findIdName(id, overlapDataInput) }); id++; overlapData.push({ edgeMin: supportData[i - 1].edgeMax, edgeMax: coreData[i].edgeMin, membershipValue: membershipValueNoOverlap, id: id, name: findIdName(id, overlapDataInput) }); id++; } else { overlapData.push({ edgeMin: coreData[i - 1].edgeMax, edgeMax: supportData[i - 1].edgeMax, membershipValue: 0.5, id: id, name: findIdName(id, overlapDataInput) }); id++; overlapData.push({ edgeMin: supportData[i - 1].edgeMax, edgeMax: supportData[i].edgeMin, membershipValue: 0, id: id, name: findIdName(id, overlapDataInput) }); id++; overlapData.push({ edgeMin: supportData[i].edgeMin, edgeMax: coreData[i].edgeMin, membershipValue: 0.5, id: id, name: findIdName(id, overlapDataInput) }); id++; } } overlapData.map(d => { for (var i = 0; i < overlapDataInput.length; i++) { if ( d.edgeMin == overlapDataInput[i].edgeMin || d.edgeMax == overlapDataInput[i].edgeMax ) { d.name = overlapDataInput[i].name; } } }); // // Sort the overlapData------------------------------ overlapData = overlapData.sort((a, b) => { let c; if (Number(a.edgeMin) - Number(b.edgeMin) < 0) { c = -1; } else if (Number(a.edgeMin) - Number(b.edgeMin) == 0) { if (Number(a.edgeMax) - Number(b.edgeMax) < 0) { c = -1; } else { c = 1; } } else { c = 1; } return c; }); // debugger; // // Re-order the id and calculate their names; overlapData.map((d, index) => { d.id = index; d.name = findIdName(index, overlapDataInput); return d; }); // // filter the overlapData, delete overlapData's items that has super small interval------- overlapData = overlapData.filter( d => d.edgeMax - d.edgeMin > 0.01 * (coreData[0].edgeMax - coreData[0].edgeMin) ); // // re-name the name of items for overlapData // // // Configure the name of overlapData; overlapData.map((d, index) => { // if (index == 2) debugger; if (d.id % 2 == 0 && (d.id / 2) % 2 == 0) { d.name = "C" + d.id / 4; } else if (d.id % 2 == 0 && (d.id / 2) % 2 != 0) { // if (Number(d.membershipValue) - 0 > 0.001) { d.name = "C" + Math.floor(d.id / 4) + "C" + Math.ceil(d.id / 4); // } else { // d.name = "CN"; // } } else if (((d.id - 1) / 2) % 2 == 0) { d.name = "C" + Math.floor(d.id / 4); } else { let rname = Math.floor(d.id / 4) + 1; d.name = "C" + rname; } return d; }); // // Change some items' name based on the existed name(already input name) let textLen = svg.length; for (var i = 0; i < textLen; i++) { // debugger; let idNumber = svg[i].__data__.id; let idText = svg[i].innerHTML; // debugger; let index = overlapData.findIndex(d => d.id == idNumber); if (index != -1) overlapData[index].name = idText; } let nameData = d3 .select( svg[0].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode ) .select("#name-data") .node().__data__; overlapData.map(d => { let indexA = nameData.findIndex(e => e.id == d.id); indexA != -1 ? (d.name = nameData[indexA].name) : null; return d; }); // debugger; return overlapData; }43:T2fec,dragSupport = { return function(g, svg, line, x, data, mmbshpPara, dataset, logData, y) { // var xOrigin, index; function dragstarted(d) { d3.select(this) .attr("stroke", "black") .attr("r", 5); } function dragged(d) { d3.select(this).attr("cx", d3.event.x); // get the value of xNumber, which is the dragged value; if (d3.select(this).node().parentElement.id == "supportcircleEdgeMax") { var xNumber = d3.select(this).data()[0]["edgeMax"]; } else if ( d3.select(this).node().parentElement.id == "supportcircleEdgeMin" ) { var xNumber = d3.select(this).data()[0]["edgeMin"]; } else { var xNumber = d3.select(this).data()[0][0]; } data.categoryDataset.map(d => { if (xNumber == d.edgeMin) { d.edgeMin = x.invert(d3.event.x); } if (xNumber == d.edgeMax) { d.edgeMax = x.invert(d3.event.x); } return d; }); // generate supportData and lineData;------------------------------------------ var idNumber = d3.select(this).data()[0].id; var id = d3.select(this).attr("id")[1]; if (id == "a") { //judge if it the left side of right side of support // debugger; var xpoint = Math.max( Number(data.coreData[idNumber].edgeMax), Math.min( Number(data.coreData[idNumber + 1].edgeMin), x.invert(d3.event.x) ) ); var wcs = xpoint - +data.coreData.filter(d => d.id == idNumber)[0].edgeMax; data.supportData[idNumber].edgeMax = xpoint; // Update the number + 1 support point------------------------------ // data.supportData[idNumber + 1].edgeMin = // +data.coreData.filter(d => d.id == idNumber + 1)[0].edgeMin - wcs; // generate overlapData let inputTextRect = d3 .select(svg.getElementById("svg-edit")) .node() .getElementsByClassName("edit-text"); data.overlapData = calOverlapData( data.coreData, data.supportData, data.overlapData, inputTextRect ); // render the number + 1 suppport points----------------- // d3.select(d3.select(this).node().parentElement.parentElement) // .select("#" + "min_" + (idNumber + 1)) // .attr( // "cx", // x(+data.coreData.filter(d => d.id == idNumber + 1)[0].edgeMin - wcs) // ); d3.select(d3.select(this).node().parentElement.parentElement) .select("#" + "max_" + idNumber) .attr("cx", x(xpoint)); // Update the number + 1 lineData-------------- // data.lineData[idNumber + 1][0][0] = Number( // +data.coreData.filter(d => d.id == idNumber + 1)[0].edgeMin - wcs // ); data.lineData[idNumber][data.lineData[idNumber].length - 1][0] = Number( xpoint ); } else if (id == "i") { var xpoint = Math.max( Number(data.coreData[idNumber - 1].edgeMax), Math.min( Number(data.coreData[idNumber].edgeMin), x.invert(d3.event.x) ) ); var wcs = +data.coreData.filter(d => d.id == idNumber)[0].edgeMin - xpoint; data.supportData[idNumber].edgeMin = xpoint; // Update the number -1 supportData-------------------- // data.supportData[idNumber - 1].edgeMax = // +data.coreData.filter(d => d.id == idNumber - 1)[0].edgeMax + wcs; //generate overlapData debugger; let inputTextRect = d3 .select(svg.getElementById("svg-edit")) .node() .getElementsByClassName("edit-text"); data.overlapData = calOverlapData( data.coreData, data.supportData, data.overlapData, inputTextRect ); // render the number - 1 support points------------------------------------ // d3.select(d3.select(this).node().parentElement.parentElement) // .select("#" + "max_" + (idNumber - 1)) // .attr( // "cx", // x(+data.coreData.filter(d => d.id == idNumber - 1)[0].edgeMax + wcs) // ); d3.select(d3.select(this).node().parentElement.parentElement) .select("#" + "min_" + idNumber) .attr("cx", x(xpoint)); // Update the number -1 lineData---------------------------------- // data.lineData[idNumber - 1][ // data.lineData[idNumber - 1].length - 1 // ][0] = Number( // +data.coreData.filter(d => d.id == idNumber - 1)[0].edgeMax + wcs // ); data.lineData[idNumber][0][0] = Number(xpoint); } // generate lambdaData --------------------------------------------- data.lambdaData.map(d => { if (xNumber == d.edgeMin) { d.edgeMin = x.invert(d3.event.x); } if (xNumber == d.edgeMax) { d.edgeMax = x.invert(d3.event.x); } return d; }); // debugger; // generate lambdaData1----------------------------------------------------- data.lambdaData1 = (function() { var lambdaData1 = []; var n = mmbshpPara.n; var coreData = data.coreData; var alpha = mmbshpPara.lambda; var supportData = data.supportData; var max = mmbshpPara.max; for (var i = 0; i < n; i++) { if (i == 0) { lambdaData1.push({ edgeMin: coreData[i].edgeMin.toString(), edgeMax: ( Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)) ).toString(), confidenceRange: '>' + alpha, class: i }); lambdaData1.push({ edgeMin: ( Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)) ).toString(), edgeMax: supportData[i].edgeMax.toString(), confidenceRange: '<' + alpha, class: i }); } else if (i > 0 && i < n - 1) { lambdaData1.push({ edgeMin: supportData[i].edgeMin.toString(), edgeMax: ( Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)) ).toString(), confidenceRange: '<' + alpha, class: i }); lambdaData1.push({ edgeMin: ( Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)) ).toString(), edgeMax: ( Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)) ).toString(), edgeMax: supportData[i].edgeMax.toString(), confidenceRange: '>' + alpha, class: i }); lambdaData1.push({ edgeMin: ( Number(supportData[i].edgeMax) - alpha * (Number(supportData[i].edgeMax) - Number(coreData[i].edgeMax)) ).toString(), edgeMax: supportData[i].edgeMax.toString(), confidenceRange: '<' + alpha, class: i }); } else { lambdaData1.push({ edgeMin: supportData[i].edgeMin.toString(), edgeMax: ( Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)) ).toString(), confidenceRange: '<' + alpha, class: i }); lambdaData1.push({ edgeMin: ( Number(supportData[i].edgeMin) + alpha * (Number(coreData[i].edgeMin) - Number(supportData[i].edgeMin)) ).toString(), edgeMax: max.toString(), confidenceRange: '>' + alpha, class: i }); } } for (var i = lambdaData1.length - 1; i >= 0; i--) { if (lambdaData1[i].edgeMin == lambdaData1[i].edgeMax) { lambdaData1.splice(i, 1); } } lambdaData1.map((d, index) => { // debugger; d.edgeMin = d.edgeMin; d.edgeMax = d.edgeMax; // d.id = index; return d; }); return lambdaData1; })(); var dataNewAttribute = addPara2Dataset(dataset, data, mmbshpPara); // mutable dataCategory = data; svg.dispatchEvent(new CustomEvent("input")); d3.select(svg) .select("#membershipLine") .selectAll("*") .remove(); d3.select(svg) .select("#membershipLine") .selectAll("path") .data(data.lineData) .enter() .append("path") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("class", "membershipLine") .attr("stroke-linecap", "round") .attr("d", line); // draw editable rectangles---------------------- var divData = { dataCategory: data, parameter: mmbshpPara, logData: logData, dataNewAttribute: addPara2Dataset(dataset, data, mmbshpPara) }; drawEditName(d3.select(svg), divData, x, y); rendInputName( divData, d3 .select(svg.parentElement.parentElement.parentElement.parentElement) .select("#inputName"), x, y ); renderGrCo( divData.parameter, divData.dataCategory.lineData, d3.select(svg), x, y ); // dispatch a new input-------------------------- svg.parentElement.parentElement.parentElement.parentElement.value = divData; svg.parentElement.parentElement.parentElement.parentElement.dispatchEvent( new CustomEvent("input") ); } function dragended(d) { var idNumber = d3.select(this).data()[0].id; var id = d3.select(this).attr("id")[1]; var leftright = id == 'a' ? 'right' : 'left'; // judge if the dragging point is on right side or left side; if (id == "a") { //judge if it the left side of right side of support // debugger; var xpoint = Math.max( Number(data.coreData[idNumber].edgeMax), Math.min( Number(data.coreData[idNumber + 1].edgeMin), x.invert(d3.event.x) ) ); } else if (id == "i") { var xpoint = Math.max( Number(data.coreData[idNumber - 1].edgeMax), Math.min( Number(data.coreData[idNumber].edgeMin), x.invert(d3.event.x) ) ); } var send = new DataGene( 'support' + "_" + idNumber + "_" + leftright, xpoint ); logData.push(send); d3.select(this) .attr("stroke", null) .attr("r", 5); svg.parentElement.parentElement.parentElement.parentElement.value = divData; svg.parentElement.parentElement.parentElement.parentElement.dispatchEvent( new CustomEvent("input") ); return svg; } var drag = d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); var divData = { dataCategory: data, parameter: mmbshpPara, logData: logData, dataNewAttribute: addPara2Dataset(dataset, data, mmbshpPara) }; svg.parentElement.parentElement.parentElement.parentElement.value = divData; svg.parentElement.parentElement.parentElement.parentElement.dispatchEvent( new CustomEvent("input") ); return drag(g); }; }44:T454d,function TrianFun(dataset, mmbshpPara, node) { var margin = { top: 30, right: 30, bottom: 30, left: 30 }; debugger; const width = +node.attr("width"); const height = +node.attr("height"); node.selectAll("*").remove(); // debugger; var svgMbshp = node // .create("svg") // .attr("viewBox", [0, 0, width, height]) .attr("id", "membershipFunction"); // debugger // $(mmbshpPara.id).empty(); // definition of parameters var n = mmbshpPara.n; var attributeCut = mmbshpPara.attributeCut; // the used attributes in raw dataset // var arrayUse = dataset.map(d => d[attributeCut]); // the extracted dataset(an array) that are going to be used by fuzzy cut. var max = mmbshpPara.max; var min = mmbshpPara.min; var core = mmbshpPara.core; // it can be changed, can be selected var support = mmbshpPara.support; // it is less than core + 2 * intercom, can be selected // debugger; // var core = 0; var intercom = mmbshpPara.intercom; // calculated by core var rangBottom = (support - core) / 2; // var core = 0; var range = [min, max]; var numOAlpha; var alpha = mmbshpPara.lambda; // 0 < alpha < 1 var maxNum; //the number of max category var traParaMmb = new traPara(n, core, range); // the parameters of membership funcion var categoryIndex = []; // it includes index of each edge of category, [x-axis, alpha], right represents that this alpha points is on the line of its right function scope var categoryDataset = []; // create the category dataset, which put all attributes of fuzzy sets and the element indexs into this parameter. var coreData = []; var supportData = []; var lambdaIndex = []; debugger; // generate scales var x = d3 .scaleLinear() .domain([min, max]) .range([margin.left, width - margin.right]); var y = d3 .scaleLinear() .domain([0, 1.2]) .range([height - margin.bottom, margin.top]); var line = d3 .line() //generator of path // .defined(d => !isNaN(d.value)) .x(d => x(d[0])) .y(d => y(d[1])); // draw base line var baseLineData = [[[min, 0], [max, 0]]]; // draw alpha line var alphaLineData = [[min, alpha], [max, alpha]]; if (alpha != 0) { svgMbshp .append("path") .datum(alphaLineData) // .transition() // .duration(durSpeed) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1) .attr("class", "membershipLine") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", "3,3") .attr("d", line); } var alphaString = alpha.toString(); if (alpha != 0) { svgMbshp .append("text") .datum("Cluster") .attr("x", x(max) * 1.01) .attr("y", y(alpha) + 3) .attr("font-family", "sans-serif") .attr("class", "membershipLine") .attr("font-size", "10px") .text(alphaString) .attr("text-anchor", "start"); } // create crispColor //https://observablehq.com/@d3/color-schemes https://github.com/d3/d3-scale-chromatic var crispColor = [d3.interpolateGreens(0.5)]; // the length of crispColor is equal to n for (var i = 0; i < n - 2; i++) { crispColor.push(d3.interpolateGreens(0.5 + (0.5 / (n - 1)) * (i + 1))); // return crispColor; } crispColor.push(d3.interpolateGreens(1)); for (var i = 1; i <= n; i++) { var left1 = min + core + 0.5 * intercom + (i - 2) * (core + intercom) + intercom - rangBottom; // it is less than left2 var left2 = min + core + 0.5 * intercom + (i - 2) * (core + intercom) + intercom; var right1 = min + core + 0.5 * intercom + (i - 2) * (core + intercom) + intercom + core; var right2 = min + core + 0.5 * intercom + (i - 2) * (core + intercom) + intercom + core + rangBottom; var lineData = []; // membership function line var dotData = []; // var dotDataSide = []; if (i == 1) { // lineData.push([min, 0], [min, 1]); categoryIndex.push([min, 1, 'right', i, crispColor[i - 1]]); lineData.push( [min, 1], [min + core + 0.5 * intercom, 1], [min + core + 0.5 * intercom + rangBottom, 0] ); categoryIndex.push([ min + core + 0.5 * intercom, 1, 'left', i, crispColor[i - 1] ]); categoryIndex.push([ right1 + rangBottom * (1 - alpha), alpha, 'left', i, crispColor[i - 1] ]); dotData.push( [min + core + 0.5 * intercom, 1], [min + core + 0.5 * intercom, 0] ); categoryIndex.push([ right1 + rangBottom, 0, 'left', i, crispColor[i - 1] ]); coreData.push({ edgeMin: min, edgeMax: right1 }); supportData.push({ edgeMin: min, edgeMax: right2 }); lambdaIndex.push([min, 'goUp']); lambdaIndex.push([right1 + rangBottom * (1 - alpha), 'goDown']); } if (i > 1 && i < n) { lineData.push([left1, 0], [left2, 1], [right1, 1], [right2, 0]); categoryIndex.push([left1, 0, 'right', i, crispColor[i - 1]]); categoryIndex.push([ left1 + alpha * rangBottom, alpha, 'right', i, crispColor[i - 1] ]); categoryIndex.push([left2, 1, 'right', i, crispColor[i - 1]]); categoryIndex.push([right1, 1, 'left', i, crispColor[i - 1]]); categoryIndex.push([ right1 + rangBottom * (1 - alpha), alpha, 'left', i, crispColor[i - 1] ]); categoryIndex.push([ right1 + rangBottom, 0, 'left', i, crispColor[i - 1] ]); dotData.push([left2, 0], [left2, 1]); coreData.push({ edgeMin: left2, edgeMax: right1 }); supportData.push({ edgeMin: left1, edgeMax: right2 }); lambdaIndex.push([left1 + alpha * rangBottom, 'goUp']); lambdaIndex.push([right1 + rangBottom * (1 - alpha), 'goDown']); // dotDataSide.push([left2, 1], [left2, 0]); if (core != 0) { dotDataSide.push([right1, 1], [right1, 0]); } } if (i == n) { lineData.push([left1, 0], [left2, 1], [max, 1]); dotData.push([left2, 1], [left2, 0]); lineData.push([max, 0], [max, 1]); categoryIndex.push([left1, 0, 'right', i, crispColor[i - 1]]); categoryIndex.push([ left1 + alpha * rangBottom, alpha, 'right', i, crispColor[i - 1] ]); categoryIndex.push([left2, 1, 'right', i, crispColor[i - 1]]); categoryIndex.push([max, 1, 'left', i, crispColor[i - 1]]); coreData.push({ edgeMin: left2, edgeMax: max }); supportData.push({ edgeMin: left1, edgeMax: max }); lambdaIndex.push([left1 + alpha * rangBottom, 'goUp']); lambdaIndex.push([max, 'goDown']); } svgMbshp .append("path") .datum(lineData) // .transition() // .duration(durSpeed) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("class", "membershipLine") .attr("stroke-linecap", "round") .attr("d", line); svgMbshp .append("path") .datum(dotData) // .transition() // .duration(durSpeed) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("class", "membershipLine") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", "3,3") .attr("d", line); svgMbshp .append("path") .datum(dotDataSide) // .transition() // .duration(durSpeed) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("class", "membershipLine") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", "3,3") .attr("d", line); } var xAxis = d3.axisBottom(x); var yAxis = d3.axisLeft(y); // svgMbshp.append("g").call(d3.axisBottom(x)); // svgMbshp.append("g").call(d3.axisLeft(y)); svgMbshp .append('g') .attr('transform', "translate(0," + y(0) + ")") // .classed('x axis', true) .attr("class", "axis") .call(xAxis); svgMbshp .append('g') .attr('transform', "translate(" + x(min) + ",0)") // .classed('y axis', true) .attr("class", "axis") .call(yAxis); svgMbshp .append("text") .attr("x", x(max) * 1.01) .attr("y", y(0)) .attr("font-family", "sans-serif") .attr("class", "membershipLine") .attr("font-size", "10px") .text(attributeCut) .attr("text-anchor", "start"); svgMbshp .append("text") .attr("x", x(min)) .attr("y", y(1.2)) .attr("dx", 3) .attr("font-family", "sans-serif") .attr("class", "membershipLine") .attr("font-size", "10px") .text("Membership function value") .attr("text-anchor", "start"); // svgMbshp // .append("rect") // .attr("width", 300) // .attr("height", 100) // .attr("fill", "red"); var lambdaData = []; for (var i = 0; i < lambdaIndex.length - 1; i++) { if (lambdaIndex[i][1] == "goUp" && lambdaIndex[i + 1][1] == "goDown") { lambdaData.push({ edgeMin: lambdaIndex[i][0], edgeMax: lambdaIndex[i + 1][0], trend: "up" }); continue; } if (lambdaIndex[i][1] == "goDown" && lambdaIndex[i + 1][1] == "goUp") { lambdaData.push({ edgeMin: lambdaIndex[i][0], edgeMax: lambdaIndex[i + 1][0], trend: "down" }); continue; } } // delete the same edge and sort categoryIndex categoryIndex = unique(categoryIndex); categoryIndex.sort(function(a, b) { return a[0] - b[0]; }); // debugger; // draw lines for separating the fuzzy sets for (var i = 0; i < categoryIndex.length; i++) { if (categoryIndex[i][1] < 1) { svgMbshp .append("path") .datum([ [categoryIndex[i][0], 0], [categoryIndex[i][0], categoryIndex[i][1]] ]) // .transition() // .duration(durSpeed) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("class", "membershipLine") .attr("stroke-dasharray", "3,3") .attr("d", line); } } function find(array, val) { var idx = 0, i = 0, j = array.length; for (i; i < j; i++) { if (array[i] > val) { idx = i - 1; break; } } return idx; } var arry = categoryIndex.map(d => d[0]); // create subsets dataset, with degree, interval, elements, etc. function CategoryDataGene( id, degree, levelSet, interval, comFuzzy, elements ) { this.id = id; this.degree = degree; this.levelSet = levelSet; this.interval = interval; // this.alphaInterval = alphaInterval; this.comFuzzy = comFuzzy; this.elements = elements; } for (var i = 0; i < categoryIndex.length - 1; i++) { var id = i; var levelSet; if (categoryIndex[i][1] == 1 && categoryIndex[(i + 1, 1)] == 1) { levelSet = 1; } else { levelSet = 2; } // if(i == 1) debugger var interval = [categoryIndex[i][0], categoryIndex[i + 1][0]]; var degree = {}; var xd = (interval[0] + interval[1]) / 2; var card = cardFun(dataset, mmbshpPara, xd); if (count(card, 0) == 1 && card[card.length - 1] != 0) { degree.all = false; degree.mid = false; degree.nei = true; } if (count(card, 0) == 1 && card[card.length - 1] == 0) { degree.all = true; degree.mid = false; degree.nei = false; } if (count(card, 0) == 2 && card[card.length - 1] != 0) { degree.all = false; degree.mid = true; degree.nei = true; } if (count(card, 0) == 2 && card[card.length - 1] == 0) { degree.all = false; degree.mid = true; degree.nei = false; } if (count(card, 0) == 3) { degree.all = false; degree.mid = true; degree.nei = true; } var comFuzzy = []; // inludes the color information and percentage belonging to 'left crisp set','right crisp set' and 'gap'; They are represented by color; comFuzzy["colorLeft"] = categoryIndex[i][4]; comFuzzy["colorRight"] = categoryIndex[i + 1][4]; comFuzzy["colorGap"] = 'black'; //------------------------------------------------------------- if ( categoryIndex[i][2] == categoryIndex[i + 1][2] && categoryIndex[i][4] == categoryIndex[i + 1][4] ) { if (categoryIndex[i][2] == 'left') { comFuzzy["percentLeft"] = ( (categoryIndex[i + 1][1] + categoryIndex[i][1]) / 2 ).toFixed(2); var j = core + 0.5 * intercom + (categoryIndex[i][3] + 1 - 2) * (core + intercom) + intercom - rangBottom; if (j.toFixed(12) - categoryIndex[i + 1][0].toFixed(12) >= 0) { comFuzzy["percentRight"] = 0; } else comFuzzy["percentRight"] = (1 - comFuzzy["percentRight"]).toFixed(2); } if (categoryIndex[i][2] == 'right') { comFuzzy["percentRight"] = ( (categoryIndex[i + 1][1] + categoryIndex[i][1]) / 2 ).toFixed(2); var j = core + 0.5 * intercom + (categoryIndex[i][3] - 1 - 2) * (core + intercom) + intercom + core + rangBottom; if (j.toFixed(12) - categoryIndex[i][0].toFixed(12) <= 0) { comFuzzy["percentLeft"] = 0; } else comFuzzy["percentLeft"] = (1 - comFuzzy["percentLeft"]).toFixed(2); } comFuzzy['gap'] = 1 - comFuzzy["percentLeft"] - comFuzzy["percentRight"]; } // ------------------------------------------------------------- if ( categoryIndex[i][2] == categoryIndex[i + 1][2] && categoryIndex[i][4] != categoryIndex[i + 1][4] ) { comFuzzy["percentLeft"] = 1; comFuzzy["percentRight"] = 0; comFuzzy['gap'] = 0; } if ( categoryIndex[i][2] != categoryIndex[i + 1][2] && categoryIndex[i][4] != categoryIndex[i + 1][4] ) { //left-right if (categoryIndex[i][2] == 'left' && categoryIndex[i + 1][2] == 'right') { if (categoryIndex[i][1] == 0) { comFuzzy["percentLeft"] = 0; } else { comFuzzy["percentLeft"] = ( (categoryIndex[i][1] * 2 - (categoryIndex[i + 1][0] - categoryIndex[i][0]) / rangBottom) / 2 ).toFixed(2); } if (categoryIndex[i + 1][1] == 0) { comFuzzy["percentRight"] = 0; } else { comFuzzy["percentRight"] = ( (categoryIndex[i + 1][1] * 2 - (categoryIndex[i + 1][0] - categoryIndex[i][0]) / rangBottom) / 2 ).toFixed(2); } comFuzzy['gap'] = ( 1 - comFuzzy["percentLeft"] - comFuzzy["percentRight"] ).toFixed(2); } //right-left if (categoryIndex[i][2] == 'right' && categoryIndex[i + 1][2] == 'left') { comFuzzy["percentLeft"] = ( (categoryIndex[i + 1][1] * 2 + (categoryIndex[i + 1][0] - categoryIndex[i][0]) / rangBottom) / 2 ).toFixed(2); comFuzzy["percentRight"] = ( (categoryIndex[i][1] * 2 + (categoryIndex[i + 1][0] - categoryIndex[i][0]) / rangBottom) / 2 ).toFixed(2); comFuzzy['gap'] = ( 1 - comFuzzy["percentLeft"] - comFuzzy["percentRight"] ).toFixed(2); } } if ( categoryIndex[i][2] != categoryIndex[i + 1][2] && categoryIndex[i][4] == categoryIndex[i + 1][4] ) { comFuzzy["percentLeft"] = 1; comFuzzy["percentRight"] = 0; comFuzzy['gap'] = 0; } var elements = []; var dataTem = new CategoryDataGene( id, degree, levelSet, interval, comFuzzy, elements ); categoryDataset.push(dataTem); } for (var i = 0; i < dataset.length; i++) { // console.log(i) // if(i == 344) debugger // debugger dataset[i]["categoryId"] = find(arry, dataset[i][attributeCut]); categoryDataset[dataset[i]["categoryId"]].elements.push(i); } svgMbshp.exit().remove(); // categoryDataset.map((d,index) => d3.select("#category-level").node()[index].value ? d.name = d3.select("#category-level").node()[index].value: d.name = ""); categoryDataset = categoryDataset.filter( d => Math.abs(d.interval[0] - d.interval[1]) / (categoryDataset[0].interval[1] - categoryDataset[0].interval[0]) > 0.01 ); coreData.map((d, index) => { d.edgeMin = d.edgeMin.toFixed(2); d.edgeMax = d.edgeMax.toFixed(2); d.id = index; return d; }); debugger; supportData.map((d, index) => { d.edgeMin = d.edgeMin.toFixed(2); d.edgeMax = d.edgeMax.toFixed(2); d.id = index; return d; }); lambdaData.map((d, index) => { d.edgeMin = d.edgeMin.toFixed(2); d.edgeMax = d.edgeMax.toFixed(2); d.id = index; return d; }); categoryDataset.map(d => { d.edgeMin = d.interval[0]; d.edgeMax = d.interval[1]; d.edgeMin = d.edgeMin.toFixed(2); d.edgeMax = d.edgeMax.toFixed(2); delete d.interval; return d; }); return [svgMbshp.node(), categoryDataset, coreData, supportData, lambdaData]; // return svgMbshp.node(); }45:Taa9,// This function is to calculate the cardinality for each element, return an array that includes the possibility of element function cardFun(dataset, histogramPara, x) { // debugger var n = Number(histogramPara.n); var attributeCut = histogramPara.attributeCut; // the used attributes in raw dataset var arrayUse = dataset.map(d => d[attributeCut]); // the extracted dataset(an array) that are going to be used by fuzzy cut. // var max = Math.max.apply(null, arrayUse.map(d => +d)); //the maximum value of quantitative dataset // var max = d3.max(arrayUse.map(d => +d)); // var min = Math.min.apply(null, arrayUse.map(d => +d)); // the minimum value of quantitative dataset // var min = d3.min(arrayUse.map(d => +d)); var max = histogramPara.max; var min = histogramPara.min; var core = histogramPara.core; // it can be changed, can be selected // var core = 0; var intercom = histogramPara.intercom; // calculated by core // console.log([min, max, core + 0.5 * intercom]) var support = histogramPara.support; // it is less than core + 2 * intercom, can be selected var rangBottom = (support - core) / 2; var cardData = new Array(n + 1); for (var i = 0; i < n + 1; i++) { cardData[i] = 0; } for (var i = 0; i < n; i++) { var left1 = min + core + 0.5 * intercom + (i - 1) * (core + intercom) + intercom - rangBottom; // it is less than left2 var left2 = min + core + 0.5 * intercom + (i - 1) * (core + intercom) + intercom; var right1 = min + core + 0.5 * intercom + (i - 1) * (core + intercom) + intercom + core; var right2 = min + core + 0.5 * intercom + (i - 1) * (core + intercom) + intercom + core + rangBottom; if (i == 0) { // debugger if ((x >= min) & (x <= min + core + 0.5 * intercom)) { cardData[i] = 1; } if ( (x > min + core + 0.5 * intercom) & (x <= min + core + 0.5 * intercom + rangBottom) ) { cardData[i] = ((right2 - x) / rangBottom).toFixed(2); } } if (i < n - 1 && i > 0) { if (x > left1 && x <= left2) { cardData[i] = ((x - left1) / rangBottom).toFixed(2); } if (x > left2 && x <= right1) { cardData[i] = 1; } if (x > right1 && x <= right2) { cardData[i] = ((right2 - x) / rangBottom).toFixed(2); } } if (i == n - 1) { if (x > left1 && x <= left2) { cardData[i] = ((x - left1) / rangBottom).toFixed(2); } if (x > left2 && x <= max) { cardData[i] = 1; } } } cardData[n] = (1 - d3.sum(cardData)).toFixed(2); return cardData; }46:Tb37,function renderGrCo(mmbshpParaTrue, lineData, svgMbshp, x, y) { // // mmbshpParaTrue is the parameters including color; lineData is the dataset for visualize the membership fucntion; // svgMbshp is the selection of svg using D3; x and y are axis; // // debugger; svgMbshp.select("#areaColor").remove(); let area = d3 .area() .x((d) => x(d[0])) .y0(y(0)) .y1((d) => y(d[1])); // // The function of gradient colors // // var opacity = 0.5; let gradientColor = (d, index) => { // debugger; let color1 = d3.hsl(d.color[index]); let a = d3.hsl(d.color[index]); a.s = 0; let color2 = a; return d3.interpolateHsl(color2, color1); }; // let newLineData = new Array(mmbshpParaTrue.n); for (var i = 0; i < lineData.length; i++) { // add multiple arrays for rendering lines; let seg = d3.range(0, 1, 0.1); seg.push(1); let yValue = []; for (var j = 0; j < lineData[i].length - 1; j++) { for (var m = 0; m < seg.length; m++) { // if (m == 8) debugger; yValue.push(d3.interpolate(lineData[i][j], lineData[i][j + 1])(seg[m])); } // debugger; yValue.map((d) => d[0].toFixed(3)); yValue.id = i; } newLineData[i] = yValue; } newLineData.map((d) => d.map((d) => { d[0] = d[0].toFixed(2); return d; }) ); var newData = newLineData.map((d, Index) => { d = d.map((p, index) => { let a; if (index === d.length - 1) { a = [p]; // return a; } else { a = [p, d[index + 1]]; // return a; } // debugger; a.id = Index; // debugger; var new_col = gradientColor( mmbshpParaTrue, Index )(p[1]).replace(/rgb/i, "rgba"); var new_col = new_col.replace(/\)/i, ",0.5)"); a.color = new_col; return a; }); return d; }); // debugger; svgMbshp .append("g") .attr("id", "areaColor") .lower() .selectAll("g") .data(newData) .join("g") .selectAll("path") .data((d) => d) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke-width", 0.02) .attr("stroke", (d, index) => { // debugger; var new_col = gradientColor( mmbshpParaTrue, d.id )(d[0][1]).replace(/rgb/i, "rgba"); var new_col = new_col.replace(/\)/i, ",0.5)"); return new_col; }) .attr("fill", (d, index) => { var new_col = gradientColor( mmbshpParaTrue, d.id )(d[0][1]).replace(/rgb/i, "rgba"); var new_col = new_col.replace(/\)/i, ",0.5)"); return new_col; }) // Render color inside the membership function. // .attr("fill", "none") // Don't render color inside the membership function // .attr("fill-opacity", 0.5) .attr("d", area); return svgMbshp.node(); }47:Tef7,function fullscreen({ className = 'custom-fullscreen', style = null, breakLayoutAtCell = 1, hideAfter = 2, hideBefore = 1, left = 0, right = 100, button } = {}) { //WORK INITIALLY FROM @mootari/fullscreen-layout-demo //THEN ADAPTED IN @severo/two-columns-layout-in-fullscreen-mode function hide({ hideAfter = Infinity, hideBefore = 0, reset = false } = {}) { let cells = document.getElementsByClassName('observablehq'); for (let i = 0; i < cells.length; i++) { if ((i < hideBefore || i > hideAfter) && !reset) cells[i].style.display = "none"; else cells[i].style.display = "block"; } // console.log("Hide", cells); return cells; } // Superfluous bling. const buttonStyle = style != null ? style : 'font-size:1rem;font-weight:bold;padding:8px;background:hsl(50,100%,90%);border:5px solid hsl(40,100%,50%); border-radius:4px;box-shadow:0 .5px 2px 1px rgba(0,0,0,.2);cursor: pointer'; button = button || html`